javascript - 更改点击的链接样式

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 specificity 时，您的问题就可以解决 检查下图。

a 不太具体。 #whatever #whatever 更具体并获胜。