如何在其他鏈接處於活動狀態時刪除其他鏈接上的活動狀態

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