jquery - 索引页面的事件导航菜单项

Question

当用户在该页面上以更改主菜单导航链接的样式时，我能够获取我的任何页面的 URL 并在菜单项上设置“事件”状态。然而，当用户在主页上时，他们都被设置了，所以我想知道我如何警告这一点，而不是在所有链接上显示事件状态，而只是在 / (root)

$(function(){
    var current = location.pathname;
    $('.navbar .tabs ul li a').each(function(){
        var $this = $(this);
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('is-active');
        }
    })
});

这可能是一件非常简单的事情，但 JQuery 并不是我最擅长的语言。

Answer 1

<li><a href="index.html">Home</a></li>

下面的代码在列表元素 中搜索事件页面的 href。然后将带有 addClass('active') 的类“active”添加到事件页面 ，以便您现在可以通过 CSS 调用它。将这段代码放在 html 文件的头部。

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    $(function(){
        $('.navbar .tabs ul li a').each(function(){
            if ($(this).prop('href') == window.location.href) {
                $(this).addClass('active'); $(this).parents('li').addClass('active');
            }
        });
    });
</script>

您现在可以添加您的 css 条件，例如更改颜色:

.navbar .tabs ul li a {
    color:            #F8F8F8;
    background-color: #4f81bd;
}