如标题所示,我正在使用 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 内。我加载 header :
$(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()
它会停止加载链接(如预期的那样)并且不再起作用。感谢您的帮助!
最佳答案
你可以使用 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");
});
});
关于jquery - 添加的类仅在单击链接两次后保留,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33341481/