Bootstrap导航栏活动状态不起作用
我有bootstrap v3。
我在navbar上使用class="active" ，当按下菜单项时，它不会切换。 我知道如何做到这一点与jQuery和build立一个点击function，但我认为这个function应该包括在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>
我是否设置正确？
（在一个不相关的说明，但可能相关的？当菜单移动，我点击菜单button，它崩溃了。再次推它不会崩溃，所以这个问题，与另一个，都表示错误的JavaScript设置也许？）
你已经包括了缩小的Bootstrap js文件和折叠/转换插件，而文档声明：
bootstrap.js和bootstrap.min.js都包含一个文件中的所有插件。
只包括一个。
和
对于简单的过渡效果，将transition.js包含在其他JS文件中。 如果你正在使用编译的（或缩小的）bootstrap.js，那就不需要包含这个了 – 它已经在那里了。
所以这可能是你最小化问题的问题。
对于积极的class级，你必须自己pipe理，但只是一两行。
$(".nav a").on("click", function(){ $(".nav").find(".active").removeClass("active"); $(this).parent().addClass("active"); });
Bootply： http : //www.bootply.com/IsRfOyf0f9
这是我的切换活动页面的解决scheme
$(document).ready(function() { $('li.active').removeClass('active'); $('a[href="' + location.pathname + '"]').closest('li').addClass('active'); });
使用引导程序的3.3.4版本，在长的html页面上，您可以参考pg的章节。 通过类或id来pipe理活动的导航栏链接间谍滚动与正文元素：
<body data-spy="scroll" data-target="spy-scroll-id">
数据目标将是一个ID为“spy-scroll-id”的div
<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>
这应该通过点击而不需要任何JavaScriptfunction来激活链接，并且也会自动激活每个链接，当你滚动页面的相应的链接部分，一个js onclick（）不会。
这对我来说是完美的，导致“window.location.pathname”也包含真实页面名称之前的数据，例如directory / page.php。 所以实际的导航栏链接只会被设置为活动，如果该url包含此链接。
$(document).ready(function() { // ----------------------------------------------------------------------- $.each($('#navbar').find('li'), function() { $(this).toggleClass('active', window.location.pathname.indexOf($(this).find('a').attr('href')) > -1); }); // ----------------------------------------------------------------------- });
如果你不使用锚链接，你可以使用这样的东西：
$(document).ready(function () { $.each($('#navbar').find('li'), function() { $(this).toggleClass('active', '/' + $(this).find('a').attr('href') == window.location.pathname); }); });
所有你需要做的只是添加数据切换=“选项卡”到你的链接里面的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>
这个优雅的解决scheme为我做了伎俩。 任何新的想法/build议，欢迎。
$( document ).on( 'click', '.nav-list li', function ( e ) { $( this ).addClass( 'active' ).siblings().removeClass( 'active' ); } );
你可以使用jQuery的“兄弟（）”方法来保持只有被访问的项目处于活动状态，并且其兄弟姐妹处于非活动状态。
我希望这将有助于解决这个问题。
var navlnks = document.querySelectorAll(".nav a"); Array.prototype.map.call(navlnks, function(item) { item.addEventListener("click", function(e) { var navlnks = document.querySelectorAll(".nav a"); Array.prototype.map.call(navlnks, function(item) { if (item.parentNode.className == "active" || item.parentNode.className == "active open" ) { item.parentNode.className = ""; } }); e.currentTarget.parentNode.className = "active"; }); });
今天我一直在努力，data-togle只适用于单页面应用程序。
我没有使用Ajax来加载内容，我实际上对其他页面的发布请求，所以第一个JS脚本也是无用的。 我解决这个问题：
var active = window.location.pathname; $(".nav a[href|='" + active + "']").parent().addClass("active");
我有一些痛苦，使用dynamic生成的列表项目 – WordPress的堆栈。
添加了这个，它工作：
$(document).ready(function () { $(".current-menu-item").addClass("active"); });
将在飞行中做到这一点。
使用Bootstrap 4，你可以使用这个：
$(document).ready(function() { $(document).on('click', '.nav-item a', function (e) { $(this).parent().addClass('active').siblings().removeClass('active'); }); });
“启动”类不是通过引导启动的。 在你使用PHP的情况下，你可以看到：
如何添加类='活跃'的PHP菜单的HTML菜单
以帮助您大部分自动化的方法。
点击一个项目后，自举手机菜单un-collapse可以使用这个
$("ul.nav.navbar-nav li a").click(function() { $(".navbar-collapse").removeClass("in"); });
我使用引导裸主题，这里是示例导航栏代码。 注意元素的类名 – > .nav – 因为这是在java脚本中引用的。
/ Collect the nav links, forms, and other content for toggling #bs-example-navbar-collapse-1.collapse.navbar-collapse %ul.nav.navbar-nav %li %a{:href => "/demo/one"} Page One %li %a{:href => "/demo/two"} Page Two %li %a{:href => "/demo/three"} Page Three
在视图页面（或部分）中添加：javascript，这需要在每次页面加载时执行。
haml查看片段 – >
- content_for :javascript do :javascript $(function () { $.each($('.nav').find('li'), function() { $(this).toggleClass('active', $(this).find('a').attr('href') == window.location.pathname); }); });
在javascriptdebugging器中确保你有'href'属性与window.location.pathname匹配的值。 这与@Zitrax的解决scheme略有不同，它帮助我解决了我的问题。
对于AngularJS ，你可以像这样使用ng-class ：
HTML – >
<nav class="navbar navbar-default" ng-controller="NavCtrl as vm"> <div class="container"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav" > <li ng-class="vm.Helper.UpdateTabActive('Home')"><a href="#" ng-click>Home</a></li> <li ng-class="vm.Helper.UpdateTabActive('About')"><a href="#about">About</a></li> <li ng-class="vm.Helper.UpdateTabActive('Contact')"><a href="#contact">Contact</a></li> </ul> </div> </nav>
和控制器
app.controller('NavCtrl', ['$scope', function($scope) { var vm = this; vm.Helper = { UpdateTabActive: function(sTab){ return window.location.hash && window.location.hash.toLowerCase() == ("#/" + sTab).toLowerCase() ? 'active' : ''; } } }]);
如果你使用$ location，那么不会有散列。 所以你可以使用$ location从URL中提取所需的string
以下将不会在所有情况下工作 – >
使用像下面这样的范围variables只能在点击时才起作用，但是如果使用$state.transitionTo或window.location完成转换，或者手动更新URL，Tab值将不会被更新
<ul class="nav navbar-nav" ng-init="Tab='Home'"> <li ng-class="Tab == 'Home' ? 'active' : ''"><a href="#" ng-click="Tab = 'Home'">Home</a></li> <li ng-class="Tab == 'About' ? 'active' : ''"><a href="#" ng-click="Tab = 'About'">About</a></li> </ul>
