JQuery实现网页选项卡效果

最新推荐文章于 2021-10-07 17:40:42 发布

晴天;'

最新推荐文章于 2021-10-07 17:40:42 发布

阅读量421

点赞数 1

本文链接：https://blog.youkuaiyun.com/sj15560122716/article/details/106890593

版权

JQ代码

<script type="text/javascript">
        $(document).ready(function () {
            //遍历tabmenu里面 li
            $("#tou li").each(function (e) {
                //当前点击的li
                $(this).click(function () {
                    //删除全部样式
                    $("#tou li").removeClass("tab");
                    //为当前添加样式
                    $(this).addClass("tab");
                    //显示对应的div
                    $("#wei div").eq(e).show().siblings().hide();
                });
            });
        });
        
    </script>

<body>
<div id="zuida">
    <div id="tou" >
        <ul>
            <li class="tab">新闻</li>
            <li>体育</li>
            <li>游戏</li>
        </ul>
    </div>
    <div id="wei">
        <div class="con">新闻</div>
        <div>体育</div>
        <div>游戏</div>
    </div>
</div>
</body>

效果