在导航栏中显示活动项目答案

【问题标题】：Show active item in a navigation bar在导航栏中显示活动项目
【发布时间】：2014-05-19 13:59:56
【问题描述】：

我正在构建一个导航栏，并希望突出显示活动项目（将字体更改为另一种颜色）。但是现在默认项总是高亮显示，活动项显示没有区别。

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

【问题讨论】：

现场版可以在这里找到：jsfiddle.net/yujuns/5zZPN

标签： jquery html css navigation

【解决方案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');
});

【讨论】：

【解决方案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
}

$(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.
    });
});

【讨论】：

谢谢，我想同时参与这两项活动。但它有同样的问题。您可以在此处找到基于您的更正的现场演示。 jsfiddle.net/yujuns/5zZPN

【解决方案3】：

由于某种原因，其他方法不起作用，所以我让它不是超级有效，所以如果你能帮助它变得更好 lmk

$(document).ready(function () {
    var url = window.location.href;
    let me = $('ul li a');
    //using jquery map
    $(me).map(function(idx, elem) {
            console.log($(elem).attr("href"));
              if(url.includes($(elem).attr("href"))){
                    console.log("active");
                    $(elem).addClass("active");
            }else{
            console.log("No");
            }

    });

  }
);

【讨论】：