时间戳

首页 > 解决方案 > 索引页面的活动导航菜单项

jquery - 索引页面的活动导航菜单项

问题描述

当用户在该页面上以更改主菜单导航链接的样式时，我可以获取我的任何页面的 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 并不是我最擅长的语言。

标签： jquerycss

解决方案

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

下面的代码在列表元素 < a > 中搜索活动页面的 href。然后使用 addClass('active') 将“active”类添加到活动页面<a>，以便您现在可以通过 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;
}

推荐阅读