jquery mobile: navbar not keeping active state

问题

I have this navbar footer:

<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 -->

The problem is that the buttons don't keep their active state when clicked. This does work when a change a href to # on all buttons, but off course, this breaks my navigation.

I've tried adding ui-state-persist to all buttons, but that didn't work either. Anyone knows how to fix this?

Another thing I've tried is this:

$(".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"); });
}

This doesn't work either...

EDIT: Apparently, there's no callback for removeClass. Removing the callback didn't work either though...

回答1:

You need to add your own code that updates the active button each time the page changes. There are different ways to do this, but here is one way:

$(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" );
        }
    });
});

Each time the pagecontainer widget changes page, we get the ID of the page being shown and then step through the navbar links to see which href ends with this page id.

DEMO

You could also look at the persistent navbar demo which uses data-attributes: http://demos.jquerymobile.com/1.4.5/toolbar-fixed-persistent/

回答2:

JQuery object doesn't have a method called id(), so use attribute or property.

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

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

回答3:

I found this,

ui-state-persist

Add this to your active class state as another class.

Example: <a href="#" data-icon="star" class="ui-btn-active ui-state-persist">Yellow</a>

Hope this helps.

来源：https://stackoverflow.com/questions/29513005/jquery-mobile-navbar-not-keeping-active-state

标签

jquery

css

jquery-mobile