点击链接后保持链接颜色，直到点击另一个链接。

Question

在我的网页上每篇文章下面，我都有三个按钮：“作者”，“相关文章”和“本类别文章”：SoCatchy! 我想在单击每个按钮时添加颜色，并保持该颜色直到单击另一个链接。

以下是我的代码：

HTML：

<ul class="tabnav-widget ui-tabs-nav">
   <li class="ui-tabs-selected">
      <a class="" href="#tab1-widget">written by</a>
   </li>
   <li>
      <a class="" href="#tab3-widget">Related Posts</a>
   </li>
   <li class="">
      <a class="" href="#tab4-widget">In this Category</a>
   </li>
</ul>

CSS（层叠样式表）：

.tabnav li a, .tabnav-widget li a{color:@white;}
.tabnav li:active, .tabnav-widget li:active{background:@white;}

在jQuery中，我不知道我需要构建哪个函数才能实现我想要的效果。我需要帮助来构建它。

提前感谢您的帮助，任何帮助都将不胜感激。

- David

Answer 1

可以使用 JavaScript 实现此功能。

$(".tabnav-widget li a").click(function(){        
   if(!($(this).hasClass("active"))){
       $(".tabnav-widget li a.active").removeClass("active");
       $(this).addClass("active");
   }       
});

- codingrose

---

hasClass检查不是必要的。 $(".tabnav-widget li a.active").removeClass("active"); $(this).addClass("active"); - rorypicko

为了避免闪烁，可以使用.removeClass()和.addClass()方法。 - codingrose

谢谢您的回复，但似乎不起作用。 例如，当单击3个按钮中的一个时，我希望出现红色，并保持到单击其他链接为止。 我需要在CSS类中进行修改吗？感谢您的时间。 - David

是的，你的 active 类必须与你的 li a 不同颜色，例如 .tabnav li:active, .tabnav-widget li:active{background:@red;}。否则，active 类将不可见。 - codingrose