The*_*ter 78 html javascript twitter-bootstrap twitter-bootstrap-3
我有bootstrap v3.
当我按下菜单项时,我使用class="active"on my navbar并且它不会切换.我知道如何使用jQuery并构建一个单击函数,但我认为这个功能应该包含在bootstrap中？那么也许这是一个JavaScript问题？
这是我的头文件,包含我的js/css/bootstrap文件:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href= "/stylesheets/styles.css" />
<!--jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!-- Bootstrap JS -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/bootstrap-collapse.js"></script>
<script src="/bootstrap/js/bootstrap-transition.js"></script>
这是我的navbar代码:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/index.php">MyBrand</a>
</div>
<div class="collapse navbar-collapse navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="/index.php">Home</a>
</li>
<li>
<a href="/index2.php"> Links</a>
</li>
<li>
<a href="/history.php">About</a>
</li>
<li>
<a href="/contact.php">Contact</a>
</li>
<li>
<a href="/login.php">Login</a>
</li>
</ul>
</div>
</div>
</nav>
我这样做了吗？
(在一个不相关的注释,但可能相关？当菜单移动时,我点击菜单按钮,它崩溃.再次推它不会崩溃它.所以这个问题,与另一个,都表示错误的JavaScript设置也许？)
Pet*_*TNT 135
您已经包含了缩小的Bootstrap js文件和折叠/转换插件,而文档说明:
bootstrap.js和bootstrap.min.js都包含单个文件中的所有插件.
仅包括一个.
和
对于简单的过渡效果,请将transition.js包含在其他JS文件旁边.如果你正在使用编译的(或缩小的)bootstrap.js,则不需要包含它 - 它已经存在了.
这对于最小化问题很可能是你的问题.
对于活动类,您必须自己管理它,但它只是一两行.
Bootstrap 3:
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
Bootply:http://www.bootply.com/IsRfOyf0f9
Bootstrap 4:
$(".nav .nav-link").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).addClass("active");
});
Jon*_*Jon 77
这是我切换活动页面的解决方案
$(document).ready(function() {
$('li.active').removeClass('active');
$('a[href="' + location.pathname + '"]').closest('li').addClass('active');
});
小智 14
这对我来说是完美的,因为"window.location.pathname"还包含真实页面名称之前的数据,例如directory/page.php.因此,如果网址包含此链接,则实际的导航栏链接将仅设置为活动状态.
$(document).ready(function() {
// -----------------------------------------------------------------------
$.each($('#navbar').find('li'), function() {
$(this).toggleClass('active',
window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
});
// -----------------------------------------------------------------------
});
小智 13
使用版本3.3.4的bootstrap,在长html页面上,您可以参考pg的各个部分.通过class或id来管理带有spy-scroll和body元素的活动导航栏链接:
<body data-spy="scroll" data-target="spy-scroll-id">
数据目标将是一个div,其id ="spy-scroll-id"
<div id="spy-scroll-id" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#topContainer">Home</a></li>
<li><a href="#details">About</a></li>
<li><a href="#carousel-container">SlideShow</a></li>
</ul>
</div>
这应该通过点击而不需要任何javascript函数来激活链接,并且当你滚动浏览页面的相应链接部分时js onclick()将不会自动激活每个链接.
如果您不使用锚链接,可以使用以下内容:
$(document).ready(function () {
$.each($('#navbar').find('li'), function() {
$(this).toggleClass('active',
'/' + $(this).find('a').attr('href') == window.location.pathname);
});
});
小智 9
您只需将data-toggle ="tab"添加到bootstrap导航栏中的链接,如下所示:
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#">Home</a></li>
<li><a data-toggle="tab" href="#">Test</a></li>
<li><a data-toggle="tab" href="#">Test2</a></li>
</ul>
小智 5
这个优雅的解决方案对我有用。欢迎任何新的想法/建议。
$( document ).on( 'click', '.nav-list li', function ( e ) {
$( this ).addClass( 'active' ).siblings().removeClass( 'active' );
} );
您可以使用 jQuery 的“siblings()”方法来仅保持访问的项处于活动状态，而其兄弟项处于非活动状态。
通过Bootstrap 4，您可以使用以下命令：
$(document).ready(function() {
$(document).on('click', '.nav-item a', function (e) {
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
我用这个。它简短、优雅且易于理解。
$(document).ready(function() {
$('a[href$="' + location.pathname + '"]').addClass('active');
});
document.addEventListener("DOMContentLoaded", function () {
// make all currently active items inactive
// (you can delete this block if you know that there are no active items when loading the page)
document.querySelectorAll("a.nav-link.active").forEach(li => {
li.classList.remove("active");
li.attributes.removeNamedItem("aria-current");
});
// find the link to the current page and make it active
document.querySelectorAll(`a[href="${location.pathname}"].nav-link`).forEach(a => {
a.classList.add("active");
a.setAttribute("aria-current", "page");
});
});
| 归档时间： |
|
| 查看次数： |
240601 次 |
| 最近记录： |