如何在其他链接处于活动状态时取消其他链接的粗体显示

How to unbold other links when other links are active?

本文关键字：链接 其他 取消 显示 活动状态      更新时间：2023-09-26

我试图将单击的链接设为粗体，但当我单击其他链接时，它应该会从该链接中删除粗体。我试过下面的代码，当我点击一个链接时，它确实会使链接变为粗体，但在我点击其他链接后，以前点击的链接会保持粗体。

单击新链接时，如何从以前单击的链接中删除粗体？

<a href="#">link A</a>
<a href="#">link B</a>
<a href="#">link C</a>
<a href="#">link D</a>
$(document).ready(function(){
    $("a").click(function(){
        $(this).css("font-weight","bold");
    });
});

我建议切换一个类。

基本上，它从所有同级元素中删除类active，然后使用.end()方法选择初始元素并添加类active:

$("a").click(function() {
  $(this).siblings().removeClass('active').end().addClass('active');
});
.active {
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">link A</a>
<a href="#">link B</a>
<a href="#">link C</a>
<a href="#">link D</a>

您可以使用.not();，也可以通过使用ToggleClass();而不是addClass(); 来切换类

$(document).ready(function(){
    $("a").click(function(){
        $('a').not($(this)).removeClass('active');
        $(this).addClass('active');
    });
});
.active{
  font-weight : bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">link A</a>
<a href="#">link B</a>
<a href="#">link C</a>
<a href="#">link D</a>

我认为Josh Crozier的答案是最好的解决方案，应该推荐。但只是想分享，如果有人仍然想在不使用类的情况下做到这一点，那也不是不可能做到的：

$("a").click(function() {
   $(this).siblings().css("font-weight","normal").end().css("font-weight","bold");
});
相关文章：