更改单击的链接样式

Question

我有这个：

<section class="header">
  <div class="holder">
    <span class="name">Joe Doe</span>
    <nav class="">
      <ul class="">
        <li><a href="#">Do Something</a></li>
        <li><a href="#">Do Something Else</a></li>
        <li><a href="#">Who knows</a></li>
      </ul>
    </nav>
  </div>
</section>  

我的脚本定位并添加类。

$(document).ready(function(){
    $(".header nav ul li a").click(function(e){
        $(this).addClass('active');
    });
)};

更新 Css：

.header nav ul li a{
    font-size: 15px;
    text-transform: uppercase;
    color: #959393;
    text-decoration: none;
}

.header nav ul li a:hover{
    color: #fff;
}
.active{
    color: red;
}

问题：

当我点击链接时，它确实得到了红色，但它立即变回原来的颜色，链接仍然与类，可能是因为页面正在重新加载或什么？ 我无法使用preventDefault()因为我需要这些链接来表现为链接。

Answer 1

如果在添加!important时它变红，那么当您了解 css特异性时，您的问题就可以解决 检查下面的图片。

a不太具体。 #whatever #whatever更具体，更胜一筹。

Answer 2

你可以用直接的CSS做到这一点 - 不需要js / jQuery。此外，只要您遵循相同的特异性，就无需使用!important附加CSS。

.header nav ul li a{
    font-size: 15px;
    text-transform: uppercase;
    color: #959393;
    text-decoration: none;
}

.header nav ul li a:hover{
    color: #fff;
}
.header nav ul li a:visited{
    color: red;
}
.header nav ul li a:active{
    color: red;
}

Answer 3

如果页面正在重新加载，您的页面将丢失状态，并且点击添加的类将丢失。

要解决这个问题，你必须以某种方式维护页面的状态。

一种方法是使用sessionStorage，您将需要这些链接的ID。

$(document).ready(function(){

    //reapply current active link (if found)
    if (!!sessionStorage.activeLink) {
        $("#" + sessionStorage.activeLink).addClass('active');
    }

    $(".header nav ul li a").click(function(e){
        //keep track of which link was clicked.
        sessionStorage.activeLink = $(this).prop("id");

        $(this).addClass('active');
    });
)};