Question

正如标题所示，我正在使用jQuery和jQuery Mobile向导航栏中的链接添加一个类。遗憾的是，该类已添加，但一旦页面加载完毕就会消失。一旦我再次点击该链接，它就会被添加并保留。

我的导航栏看起来像这样：

<div data-role="header">
<div data-role="navbar" id="navbar">
    <ul>
        <li><a href="#find_food" id="find_food_link">Find something to eat!</a></li>
        <li><a href="#invite_food" id="invite_food_link">Invite people!</a></li>
        <li><a href="#messages" id="messages_link">Messages</a></li>
        <li><a href="#overlayPanel">Profile</a></li>
    </ul>
</div>

因为我想在所有子页面中保持导航栏相同，所以我将它放在pages-div之外但是在body-tag内部，如文档所示。我用：

加载标题

$(function(){
        $( "[data-role='header'], [data-role='footer']" ).toolbar({ theme: "a" });
    });

最后，我尝试将“ui-btn-active”类添加到以下链接：

$('#navbar').click(function(e){
    $(e.target.id).addClass("ui-btn-active");
})

如果我使用e.preventDefault()它会阻止链接加载（如预期的那样）并且不再有效。谢谢你的帮助！

Answer 1

Yo可以使用pagecontainer小部件 transition event 在所有转换完成后添加该类：

$(document).on("pagecreate","#find_food", function(){ 

    $( ":mobile-pagecontainer" ).on( "pagecontainertransition", function( event, ui ) {
        var pID = ui.toPage.prop("id");
        $('#navbar [href="#' + pID + '"]').addClass("ui-btn-active");
    });

});

<强> DEMO

Answer 2

您可以在doc ready中添加它：

$(function(){
    if(window.location.hash){
       $('#navbar').find('[href="'+window.location.hash+'"]').addClass('ui-btn-active');
    }
    $( "[data-role='header'], [data-role='footer']" ).toolbar({ theme: "a" });
});

仅在点击链接两次

2 个答案: