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

Answer 2

点击或悬停时是否有效？

如果两者都是;

的CSS

#fixedbar ul li.active, #fixedbar ul li:hover{
    background:black; //do what you want to be
}

/* To style just "a" element */

#fixedbar ul li.active a, #fixedbar ul li:hover > a{
    color:red; //do what you want to be
}

的js

$(function(){
    $('#fixednav ul li a').click(function(){
        $('#fixednav ul').find('li.active').removeClass('active');
        $(this).parent().addClass('active');

        return false; //return false to aviod scroll top.
    });
});

Answer 3

由于某种原因，其他方法无法正常工作，因此我使其效率不高，因此，如果您可以帮助改善lmk，那么

for

在导航栏中显示活动项目

3 个答案: