jquery 移动设备：导航栏未保持活动状态

Question

我有这个导航栏页脚：

<div data-role="footer" data-position="fixed" data-theme="a" >
    <div data-role="navbar" data-iconpos="bottom">
        <ul>
            <li><a href="#page1" id="button_1" data-icon="user" class="my_buttons ui-btn-active">Page1</a></li>
            <li><a href="#page2" id="button_2" data-icon="lock" class="my_buttons">Page2</a></li>
            <li><a href="#page3" id="button_3" data-icon="camera" class="my_buttons">Page3</a></li>
            <li><a href="#page4" id="button_4" data-icon="comment" class="my_buttons">Page4</a></li>
            <li><a href="#page5" id="button_5" data-icon="check" class="my_buttons">Page5</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

问题是按钮在单击时不会保持其活动状态。当所有按钮上的 a href 更改为 # 时，这确实有效，但当然，这会破坏我的导航。

我试过将 ui-state-persist 添加到所有按钮，但这也不起作用。有人知道如何解决这个问题吗？

我试过的另一件事是：

$(".my_buttons").on( "tap", function() {
   var id = this.id;
   nav_state(id);
});

function nav_state(button)
{
   $(".my_buttons").removeClass("ui-btn-active",function() {
   $("#"+button).addClass("ui-btn-active"); });
}

这也不行...

编辑：显然，removeClass 没有回调。删除回调也没有用...

Answer 1

您需要添加自己的代码，以便在每次页面更改时更新活动按钮。有多种方法可以做到这一点，但这里是一种方法：

$(document).on( "pagecontainerchange", function() {
    var current = $( ".ui-page-active" ).prop("id");   
    // Remove active class from nav buttons
    $( "[data-role='navbar'] a.ui-btn-active" ).removeClass( "ui-btn-active" );
    // Add active class to current nav button
    $( "[data-role='navbar'] a" ).each(function() {
        var href = $( this ).prop("href");
        if ( href.indexOf(current, href.length - current.length) !== -1 ) {
            $( this ).addClass( "ui-btn-active" );
        }
    });
});

每次 pagecontainer 小部件更改页面时，我们都会获取正在显示的页面的 ID，然后遍历导航栏链接以查看哪个 href 以此页面 ID 结尾。

DEMO

您还可以查看使用数据属性的持久导航栏演示：http://demos.jquerymobile.com/1.4.5/toolbar-fixed-persistent/

Answer 2

JQuery 对象没有名为 id() 的方法，因此使用属性或属性.

 $(this).attr('id');

或

$(this).prop('id');

Answer 3

我找到了这个，

ui-state-persist

将此作为另一个 class 添加到您的活动 class 状态。

示例：<a href="#" data-icon="star" class="ui-btn-active ui-state-persist">Yellow</a>

希望这对您有所帮助。

jquery 移动设备：导航栏未保持活动状态

jquery mobile: navbar not keeping active state

css

jquery

jquery-mobile