在Bootstrap网站上，subnav与部分匹配，并更改背景颜色，或滚动到部分。我想创建自己的菜单没有所有的背景颜色和一切，但是，我改变了我的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或我缺少一些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');
}
}
我希望这有帮助。
