我正在构建一个导航栏,并希望突出显示事件元素(字体更改为另一种颜色)。但现在默认项始终突出显示,而事件项没有显示任何差异。
我的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');
});
关于jquery - 在导航栏中显示事件元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23739787/