当我放置 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>
我试过在带有 jQuery 的项目中添加 class,但它不起作用。如果我输入以下代码,则第一个项目在单击时不会变为活动状态:
$("#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>
有人知道发生了什么事吗?
如果有人能帮助我,我将不胜感激
My Navbar with an active class
仅检查 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 移动设备制作了一个导航栏,如他们网站上所述: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>
我试过在带有 jQuery 的项目中添加 class,但它不起作用。如果我输入以下代码,则第一个项目在单击时不会变为活动状态:
$("#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>
有人知道发生了什么事吗? 如果有人能帮助我,我将不胜感激 My Navbar with an active class
仅检查 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>