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

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

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

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

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

Answer 2

使用

$(".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 3

您可以使用下面

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