Bootstrap CSS主动导航
在Bootstrap网站上，subnav与部分相匹配，并随着你的改变背景颜色或滚动到部分。 我想创build我自己的菜单，没有所有的背景颜色和一切，但是，我改变了我的CSS是相似的，但当我向下滚动或单击菜单项上的活动类不会切换。 不知道我在做什么错。
HTML：
<ul class="menu"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About Us</a></li> <li><a href="#contact">Contact</a></li> </ul> CSS：
.menu {list-style:none;} .menu > li {float: left;} .menu > li > a {color:#555;float: none;padding: 10px 16px 11px;display: block;} .menu > li > a:hover {color: #F95700;} .menu .active > a, .menu .active > a:hover {color:#F95700;}
我检查了这些文件; jQuery，bootstrap.js和bootstrap.css都链接正确。 我必须添加一些额外的jQuery或我缺less一些CSS来获得活跃切换像他们的网站上的subnav菜单？
为了切换这个类，你需要执行一些JavaScript。
在jQuery中：
$('.menu li a').click(function(e) { var $this = $(this); if (!$this.hasClass('active')) { $this.addClass('active'); } e.preventDefault(); });
在JavaScript中：
var menu = document.querySelector('.menu'); var anchors = menu.getElementsByTagName('a'); for (var i = 0; i < anchors.length; i += 1) { anchors[i].addEventListener('click', function() { clickHandler(anchors[i]) }, false); } function clickHandler(anchor) { var hasClass = anchor.getAttribute('class'); if (hasClass !== 'active') { anchor.setAttribute('class', 'active'); } }
我希望这有帮助。
这是我结束了，因为你必须清除其他人。
$('.navbar li').click(function(e) { $('.navbar li.active').removeClass('active'); var $this = $(this); if (!$this.hasClass('active')) { $this.addClass('active'); } e.preventDefault(); });
这是我处理twitter bootstrap导航列表的代码：
$(document).ready(function () { $('ul.nav > li').click(function (e) { e.preventDefault(); $('ul.nav > li').removeClass('active'); $(this).addClass('active'); }); });
我使用2个1-liners，这取决于我的导航结构
只要确保你的链接没有任何活动类可以启动。
实际的联系
如果您的导航链接位于单独的HTML文件（如express.js中具有菜单的布局模板），则可以这样做：
$('ul.nav > li > a[href="' + document.location.pathname + '"]').parent().addClass('active');
散列链接
如果他们是哈希，请执行以下操作：
$('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){ $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); });
如果您不想在哈希单击上滚动，则返回false：
$('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){ $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); return false; });
看一些其他的答案，如果你希望网页向下滚动到该部分，当一个侧面菜单被点击时，你不想preventDefault 。
此外，您只需要删除当前的活动类，并添加一个新的不通过所有李的search。 当您select的列表项目已经激活时，您也希望代码不做任何事情，而不是不必要地添加和删除相同的活动类别。 最后，你应该把你的事件监听器放在一个不是li的元素上，因为它更容易触发iPhone和平板电脑上的点击事件等。还可以使用.delegate所以你不必等待DOM准备好的事件。 所以最后我会做这样的事情（我假设你已经预装了jQuery）：
$('body').delegate('.menu li a', 'click', function(){ var $thisLi = $(this).parents('li:first'); var $ul = $thisLi.parents('ul:first'); if (!$thisLi.hasClass('active')){ $ul.find('li.active').removeClass('active'); $thisLi.addClass('active'); } });
我build议这个代码：
<script> var curentFile = window.location.pathname.split("/").pop(); if (curentFile == "") curentFile = "Default.aspx"; $('ul.nav > li > a[href="' + curentFile + '"]').parent().addClass('active'); </script>
这是一种魅力。
我做了不同的事情来解决这个问题（fyi，我是一个完整的html / css / js业余爱好者）。
我的每个导航栏button都进入一个新页面。 所以，在每个页面的html中，我把这样的东西放在底部：
<script type="text/javascript"> $(document).ready( function(){ $("#aboutButton").removeClass("active"); }); $(document).ready( function(){ $("#dashboardButton").addClass("active"); }); </script>
这让我马上工作。
PS我尝试了接受的答案，但没有运气，因为它也需要从当前活动button中删除“活动”类，以真正“切换”结束。 我相信这是可能的，但是，我对这个东西很新。
testing，它工作正常。
$('.navbar li').click(function(e) { $('.navbar li.active').removeClass('active'); var $this = $(this); if (!$this.hasClass('active')) { $this.addClass('active'); } }); <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> . . . </ul>
任何人有这个使用jsp的问题，看你的包。
document.location.pathname给了我：/packagename/index.jsp
但我的导航栏中的href只调用了index.jsp
所以编辑消费者的答案：
$(document).ready(function() { var string = document.location.pathname.replace('/Package Name/',''); $('ul.nav > li > a[href="' + string + '"]').parent().addClass('active'); } );
我尝试了一些上面的答案，它适用于“.active”类，但是链接不能正常工作，它仍然停留在当前页面上。 然后我试了这个：
var url = window.location; // Will only work if string in href matches with location $('ul.nav a[href="' + url + '"]').parent().addClass('active'); // Will also work for relative and absolute hrefs $('ul.nav a').filter(function() { return this.href == url; }).parent().addClass('active');
我在这里find了它： Twitter Bootstrap将活跃的类添加到李
<ul class="main-menu"> <li><a href="~/Cases/Index"><i class="fa fa-font fa-fw"></i><span class="text">Audit Case</span></a></li> <li><a href="~/Cases/Auditplan"><i class="fa fa-font fa-fw"></i><span class="text">Audit Plan</span></a></li> <li><a href="~/Cases/Auditreport"><i class="fa fa-font fa-fw"></i><span class="text">Audit Report</span></a></li> <li><a href="~/Cases/Company"><i class="fa fa-font fa-fw"></i><span class="text">Company Details</span></a></li> </ul> <script> $(function(){ $('.main-menu li > a[href="' + document.location.pathname + '"]').parent().addClass('active').siblings().removeClass('active'); }) </script>
添加到您的JavaScript：
$(".menu li").click(function(e) { $(".menu li").removeClass("active"); $(this).addClass("active"); e.preventDefault(); });
这个问题已经变得很老了，并且有了答案，但是我把最好的答案变得更好了。 顶部的答案只有在页面上有一个时才有效。 这个范围是从sibling元素中删除活动，并将其添加到您单击的元素。
我还添加了类nav-toggle以便它不会干扰已经有引导js连接的东西。
$('.nav.nav-toggle li').click(function(e) { var $this = $(this); $this.siblings().removeClass('active'); if (!$this.hasClass('active')) { $this.addClass('active'); } e.preventDefault(); });
