jquery - 在导航栏中显示事件元素

Question

我正在构建一个导航栏，并希望突出显示事件元素(将字体更改为另一种颜色)。但是现在默认项总是高亮显示，事件项显示没有区别。

我的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>

Answer 1

演示: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');
});