removeClass 按钮点击添加class效果

最新推荐文章于 2022-10-09 14:39:39 发布

有梦想的小弱鸡

最新推荐文章于 2022-10-09 14:39:39 发布

阅读量208

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/qq53167889/article/details/113246598

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

案例一：

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>