Question

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

如果点击新链接，如何从之前点击的链接中删除粗体？

<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");
    });
});

Answer 1

我建议换一个班级。

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

＆＃13;

$("a").click(function() {
  $(this).siblings().removeClass('active').end().addClass('active');
});

＆＃13;

.active {
  font-weight: bold;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用.not();，然后可以使用ToggleClass();代替addClass();来切换课程

＆＃13;

$(document).ready(function(){
    $("a").click(function(){
        $('a').not($(this)).removeClass('active');
        $(this).addClass('active');
    });
});

＆＃13;

.active{
  font-weight : bold;
}

＆＃13;

<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>

＆＃13;

Answer 3

我认为Josh Crozier的答案是最好的解决方案，应该被推荐。但只是想分享，如果有人还想在不使用课程的情况下这样做，那就不可能做到：

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

如何在其他链接处于活动状态时展开其他链接？

3 个答案: