通过javascript或jquery将锚的状态更改为活动状态

Question

我遇到一个问题，即锚标记的状态是活动的。假设我在主页上，我希望主导航链接具有活动状态，因此它具有不同的颜色。这就是我现在正在做的事情。我正在引用jquery。我已经发出警报以确保我的脚本受到攻击。这是我上次尝试过的。

<div class="grid__unit one-whole">
<nav role="navigation">
    <ul id="nav--primary" class="navbar navbar--menu">
        <li><a class="navitem" href="#">Link</a></li>
        <li><a class="navitem" href="http://www.google.com">Google</a></li>
        <li><a class="navitem" id="myNavButton" href="myLink">myTitle</a></li>
    </ul>
</nav>

用css

a:hover, a:active {
color: #b74800;
}

和脚本

<script>    
$(document).ready(function () {        
    $("#myNavButton").addClass("active");
});
</script>

编辑1：

我尝试在css和脚本中添加a.active标记，如下所示，但没有成功。

<script>
$(document).ready(function () {
    var path = location.pathname.length ? location.pathname : window.location.href;
    $('.active').removeClass('active');
    $("#nav--primary").find('a[href*="' + path + '"]').addClass("active");
});
</script>

用css

a:hover, a:active, a.active {
color: #b74800;
}

编辑2 - 搜索

Answer 1

在您的CSS中，您错过了a.active声明。试试：

a:hover, a:active, a.active {
  color: #b74800;
}

在jQuery中按ID获取元素，你必须使用#myNavButton，所以：

$("#myNavButton").addClass("active");

Answer 2

所以你需要做两件事：

1。创建一个a.active

的css类

a:hover, a:active, a.active {
  color: #b74800;
}

2。在jQuery中执行此操作：

$(document).ready(function () { 
    var path = location.pathname.lenght ? location.pathname : window.location.href;   
    $('.active').removeClass('active');    
    $("#nav--primary").find('a[href*="'+path+'"]').addClass("active");
});

Answer 3

#nav--primary a.active {
   color: #b74800;
}

添加此样式。

Answer 4

为了获得所需的功能，我最终在父列表项中添加了一个ID，并且在文档就绪时，我在该列表项中添加了一个类。在css中，我为此添加了另一个类。

#nav--primary .is--selected .navitem,
#nav--primary .is--selected .navitem:hover,
#nav--primary .is--selected .navitem:focus {
  background: #colorhere; /* primary nav current page background color */
  color: #colorhere /* primary nav current page text color */
}

脚本

<script>
$(document).ready(function () {
    $("#myLiID").addClass("is--selected");
});
</script>