removeClass 按钮点击添加class效果

时间:2024-01-06 12:07:26

案例一:

html代码:

<ul class="pubClass" id="pubClass">
<li class="active">
<a href="#tag1">aa</a>
</li>
<li>
<a href="#tag2">bb</a>
</li>
<li>
<a href="#tag3">cc</a>
</li>
/ul>

jquery代码:

<script>
$(function(){
$("#pubClass li").click(function(){
$("#pubClass li").eq($(this).index()).addClass("active").siblings().removeClass("active");
})
})
</script>

案例二:

html代码:

<div class="game">
<span class="active">全部</span>
<span>游戏1</span>
<span>游戏2</span>
</div>
<div class="game">
<span class="active">全部</span>
<span>视频1</span>
<span>视频2</span>
</div>

jquery代码:

<script type="text/javascript">
$(function () {
$('.game span').click(function () {
$(this).addClass('active').siblings().removeClass('active').end();
});
});
</script>