如何在其他链接处于活动状态时删除其他链接上的活动状态
问题描述:
我只希望一个链接处于活动状态。当我点击其他链接以使该特定链接处于活动状态时,如何删除链接的活动状态?我使用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');
});
});
答
$(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>
答
使用
$(".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');
});
答
您可以使用下面
var links = $(".link a");
$(links).click(function() {
$(links).removeClass('active');
$(this).addClass('active');
});