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

将此内容添加到活动班级状态作为另一个班级。

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

希望这会有所帮助。

jquery mobile：navbar不保持活动状态

3 个答案: