当我放一个href时，jQuery 导航栏中的活动class
[英]Active class in jQuery navbar doesn't work when I put an href
问题描述
我不明白，我使用 jQuery 手机制作了一个导航栏，如他们的网站上所述： https://demos.jquerymobile.com/1.4.5/navbar/
当我不在无序列表元素中放置href时它工作正常（导航栏的单击项目变为活动状态）：
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <div id="menu"> <div data-role="navbar"> <ul> <li><a href="" class="contentUpdate" id="1"><i class="fas fa-swimmer"></i>Swim</a></li> <li><a href="" class="contentUpdate" id="2"><i class="fas fa-biking"></i>Cycle</a></li> <li><a href="" class="contentUpdate" id="3"><i class="fas fa-running"></i>Run</a></li> </ul> </div> <!-- /navbar --> </div>
但是，当我在 href 中引用另一个 div 时（我正在制作一个网页，当单击导航栏项目时，内容会发生变化），单击时不再激活活动的 class。
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <div id="menu"> <div data-role="navbar"> <ul> <li><a href="#swim" class="contentUpdate" id="1"><i class="fas fa-swimmer"></i>Swim</a></li> <li><a href="#cycle" class="contentUpdate" id="2"><i class="fas fa-biking"></i>Cycle</a></li> <li><a href="#run" class="contentUpdate" id="3"><i class="fas fa-running"></i>Run</a></li> </ul> </div> <!-- /navbar --> </div>
我尝试将 class 添加到带有 jQuery 的项目中，但它不起作用。 如果我输入以下代码，则单击时第一项不会变为活动状态：
$("#1").click(function() { $("#1").addClass("ui-btn-active"); });
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <div id="menu"> <div data-role="navbar"> <ul> <li><a href="#swim" class="contentUpdate" id="1"><i class="fas fa-swimmer"></i>Swim</a></li> <li><a href="#cycle" class="contentUpdate" id="2"><i class="fas fa-biking"></i>Cycle</a></li> <li><a href="#run" class="contentUpdate" id="3"><i class="fas fa-running"></i>Run</a></li> </ul> </div> <!-- /navbar --> </div>
但是，我知道它有效，因为如果我输入以下代码，其他两项确实会更改为活动 class：
$("#1").click(function() { $("#1").addClass("ui-btn-active"); $("#2").addClass("ui-btn-active"); $("#3").addClass("ui-btn-active"); });
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <div id="menu"> <div data-role="navbar"> <ul> <li><a href="#swim" class="contentUpdate" id="1"><i class="fas fa-swimmer"></i>Swim</a></li> <li><a href="#cycle" class="contentUpdate" id="2"><i class="fas fa-biking"></i>Cycle</a></li> <li><a href="#run" class="contentUpdate" id="3"><i class="fas fa-running"></i>Run</a></li> </ul> </div> <!-- /navbar --> </div>
有人知道发生了什么吗？ 如果有人可以帮助我使用活跃的 class 导航栏，我将不胜感激
1 个解决方案
解决方案1
1 已采纳 2020-06-17 09:36:47
仅检查navbar锚点单击是不够的。 如果您需要一个也适用于back-button或通过在代码中导航、在转换之后和使用external toolbar的解决方案，您可能需要检查pagecontainerchange触发器内的当前页面并相应地更新navbar ：
$(function(){ $( "[data-role='header'], [data-role='footer']" ).toolbar({ theme: "a" }).enhanceWithin(); }); $( document ).on( "pagecontainerchange", function(e, ui) { if(typeof ui.toPage == "object") { var id = $.mobile.activePage.attr("id"), navbar = $("[data-role=navbar]"), buttons = navbar.find(".ui-btn"), current = navbar.find("a[href='#"+id+"']"); buttons.removeClass($.mobile.activeBtnClass); current.addClass($.mobile.activeBtnClass); } });
<,DOCTYPE html> <html> <head> <title>Focus Tab</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1: user-scalable=no" /> <link rel="stylesheet" href="https.//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5:css" /> <script src="https.//code.jquery.com/jquery-2.2.4:js"></script> <script src="https.//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script> </head> <body> <div data-role="header"> <div id="menu" data-role="navbar"> <ul> <li><a href="#swim" id="1">Swim</a></li> <li><a href="#cycle" id="2">Cycle</a></li> <li><a href="#run" id="3">Run</a></li> </ul> </div> </div> <div id="swim" data-role="page"> <div data-role="content">Page Swim </div> </div> <div id="cycle" data-role="page"> <div data-role="header" data-add-back-btn="true"> <h3>My app</h3> </div> <div data-role="content">Page cycle</div> </div> <div id="run" data-role="page"> <div data-role="content">Page run</div> </div> </body> </html>
当我放宽jQuery动画时不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.