我正在构建一个导航栏，并希望突出显示活动项（将字体更改为另一种颜色）。但是，现在默认项始终突出显示，而活动项没有任何区别。
我的html代码如下：
<div id='fixedbar'>
<div class="container">
<a href="index.html#one"><img style="height:auto; width:auto; max-width:160px; max-height:160px;"src="images/logo-full-white.png"></a>
<nav id="fixednav">
<ul>
<li class='navitem active'><a href='#home'><span>Home</span></a></li>
<li class='navitem'><a href="#work"><span>Portfolio</span></a></li>
<li class='navitem'><a href='#'><span>About</span></a></li>
</ul>
</nav>
</div>
</div>
CSS：
#fixedbar ul li.active a{
color: #ff9933;
}
JS：在
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
在身体里
<script>
$('#fixednav ul li a').click(function(){
$('a').parent().removeClass('active');
$(this).parent().addClass('active');
});
</script>
演示：http : //jsfiddle.net/abhitalks/CYPL5/1/
您需要定位目标而a不是li使其变得容易。另外，请记住为样式设置样式，:visited否则将在单击后应用样式。
CSS：
.active {
color: #ff9933 !important;
}
#fixedbar ul li a, #fixedbar ul li a:visited {
color: #00f;
}
JS：
$('#fixednav ul li a').click(function () {
$('#fixednav ul li a').removeClass('active');
$(this).addClass('active');
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句