我不明白,我使用jQuery mobile制作了导航栏,如其网站上所述: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(我正在制作一个网页,单击导航栏项时,内容会更改)时,单击时将不再激活活动类。
<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>
我已经尝试使用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>
但是,我知道它是有效的,因为如果我输入以下代码,那么其他两项确实会变为活动类:
$("#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>
有人知道发生了什么吗?如果有人可以帮助我,我将不胜感激My Navbar with an active class
[我不明白,我使用jQuery mobile制作了一个导航栏,如其网站上所述:https://demos.jquerymobile.com/1.4.5/navbar/当我不放置href时,效果很好在无序列表中...
仅仅检查navbar
锚点单击是不够的。如果您需要一种也可以与back-button
或通过导航代码一起使用的解决方案,请在transitions