Question

我只希望一个链接处于活动状态。当我点击其他链接以激活该特定链接时，如何删除链接的活动状态？我正在使用jQuery addClass和removeClass

这就是我所拥有的

<style>.active {border-bottom: 3px solid #DB3030;}</style>

<div class="link"><a href="#scroll1" class="scroll">Link 1</a></div>
<div class="link"><a href="#scroll2" class="scroll">Link 2</a></div>
<div class="link"><a href="#scroll3" class="scroll">Link3</a></div>


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

Answer 1

使用

$(".link a").removeClass('active');

然后

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

所以你的完整代码（和优化）;

var links = $(".link a"); // Cache the links for better performance
$(links).click(function() {
    $(links).removeClass('active');
    $(this).addClass('active');
});

Answer 2

＆＃13;

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

＆＃13;

.active {
  border-bottom: 3px solid #DB3030;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="link"><a href="#scroll1" class="scroll">Link 1</a>
</div>
<div class="link"><a href="#scroll2" class="scroll">Link 2</a>
</div>
<div class="link"><a href="#scroll3" class="scroll">Link3</a>
</div>

＆＃13;

Answer 3

您可以使用以下

var links = $(".link a"); 
$(links).click(function() {
    $(links).removeClass('active');
    $(this).addClass('active');
});

如何在其他链接处于活动状态时删除其他链接上的活动状态

3 个答案: