jQuery Bootstrap CSS 主动导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9301507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap CSS Active Navigation
提问by user1029779
On the Bootstrap website the subnav matches up with the sections and changes background color as you or scroll to the section. I wanted to create my own menu without all the background colors and everything, however, I changed my CSS to be similar but when I scroll down or click on the menu item the active class does not switch. Not sure what I'm doing wrong.
在 Bootstrap 网站上，子导航与部分匹配，并在您或滚动到该部分时更改背景颜色。我想在没有所有背景颜色和所有内容的情况下创建自己的菜单，但是，我将 CSS 更改为类似的，但是当我向下滚动或单击菜单项时，活动类不会切换。不知道我做错了什么。
HTML:
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:
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;}
I checked the files; jQuery, bootstrap.js and bootstrap.css are all linked properly. Do I have to add some additional jQuery in or am I missing some CSS to get the active to switch like the subnav menu on their site?
我检查了文件；jQuery、bootstrap.js 和 bootstrap.css 都正确链接。我是否必须在其中添加一些额外的 jQuery 或者我是否缺少一些 CSS 才能像他们网站上的子导航菜单一样进行活动切换？
采纳答案by Nick Beranek
In order to switch the class, you need to perform some JavaScript.
为了切换类，您需要执行一些 JavaScript。
In jQuery:
在 jQuery 中：
$('.menu li a').click(function(e) {
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
In JavaScript:
在 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');
}
}
I hope this helps.
我希望这有帮助。
回答by David
This is what I ended up with since you have to clear the others as well.
这就是我最终得到的结果，因为您也必须清除其他人。
$('.navbar li').click(function(e) {
$('.navbar li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
回答by hbinduni
this is my code for handling twitter bootstrap navigation list:
这是我处理 twitter bootstrap 导航列表的代码：
$(document).ready(function () {
$('ul.nav > li').click(function (e) {
e.preventDefault();
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
});
回答by konsumer
I use 2 1-liners, depending on how my nav is structured
我使用 2 个 1-liners，具体取决于我的导航结构
Just make sure that none of your links have active class to start.
只要确保您的链接都没有活动类要开始。
actual links
实际链接
If your nav links are on separate HTML files (like a layout template in express.js that has a menu), you can do this:
如果您的导航链接位于单独的 HTML 文件中（例如 express.js 中带有菜单的布局模板），您可以这样做：
$('ul.nav > li > a[href="' + document.location.pathname + '"]').parent().addClass('active');
hash links
哈希链接
If they are hashes, do this:
如果它们是散列，请执行以下操作：
$('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){ $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); });
If you don't want to scroll on hash-click, return false:
如果您不想在哈希单击时滚动，请返回 false：
$('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){ $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); return false; });
回答by Mauvis Ledford
Looking at some of the other answers, if you want the webpage to scroll down to that section when a side menu is clicked then you don't want to preventDefault.
查看其他一些答案，如果您希望在单击侧边菜单时网页向下滚动到该部分，那么您不希望preventDefault.
Additionally, you only need to remove the current active class and add a new one not search through all li's. You also want the code to not do anything when the list item you've selected is already active—not needlessly add and remove the same active class. Lastly you should put your event listener on the a element not the li as it has an easier time of triggering a click event on iPhones and tablets, etc. Could also use .delegateso you don't have to wait for a DOM ready event. So in the end I'd do something like this (I assume you've preloaded jQuery):
此外，您只需要删除当前活动的类并添加一个新类，而不需要搜索所有 li。当您选择的列表项已经处于活动状态时，您还希望代码不执行任何操作——而不是不必要地添加和删除相同的活动类。最后，您应该将事件侦听器放在 a 元素上，而不是 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');
}
});
回答by ali mahmoodi
I suggest this code :
我建议这个代码：
<script>
var curentFile = window.location.pathname.split("/").pop();
if (curentFile == "") curentFile = "Default.aspx";
$('ul.nav > li > a[href="' + curentFile + '"]').parent().addClass('active');
</script>
It's work like a charm .
它的工作就像一个魅力。
回答by Marios Nikolaou
Tested and it works fine.
经过测试，它工作正常。
$('.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>
回答by csturtz
I did something different to solve this (fyi, i'm a complete html/css/js amateur).
我做了一些不同的事情来解决这个问题（仅供参考，我是一个完整的 html/css/js 业余爱好者）。
Each of my navbar buttons goes to a new page. so, in each page's html, i put something like this at the bottom:
我的每个导航栏按钮都会转到一个新页面。所以，在每个页面的 html 中，我把这样的东西放在底部：
<script type="text/javascript">
$(document).ready( function(){
$("#aboutButton").removeClass("active");
});
$(document).ready( function(){
$("#dashboardButton").addClass("active");
});
</script>
That got it working right away for me.
这让它立即为我工作。
P.S. I tried the accepted answer but had no luck as it would also need to remove the 'active' class from the currently active button to truly 'switch' over. I'm sure it's possible, but again, I'm pretty new to this stuff.
PS 我尝试了接受的答案，但没有运气，因为它还需要从当前活动按钮中删除“活动”类才能真正“切换”。我确信这是可能的，但同样，我对这些东西还是很陌生。
回答by FredoAF
anyone having problems with this using jsp, watch your packages.
任何人在使用 jsp 时遇到问题，请注意您的包。
document.location.pathname gave me: /packagename/index.jsp
document.location.pathname 给了我：/packagename/index.jsp
but my href in my navbar called just index.jsp
但是我的导航栏中的 href 只是 index.jsp
So to edit konsumer's answer:
因此，要编辑 konsumer 的答案：
$(document).ready(function() {
var string = document.location.pathname.replace('/Package Name/','');
$('ul.nav > li > a[href="' + string + '"]').parent().addClass('active');
} );
回答by whyisyoung
I tried some of the top answers above, it works for ".active" class, but the links not working well, it still stays on the current page. Then I tried this:
我尝试了上面的一些最佳答案，它适用于“.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');
I found it here: Twitter Bootstrap add active class to li
