使用JQuery实现选项卡

最新推荐文章于 2024-07-24 16:20:17 发布

芥须弥

最新推荐文章于 2024-07-24 16:20:17 发布

阅读量306

点赞数

文章标签： javascript html5 css 选项卡

本文链接：https://blog.csdn.net/hhf0804/article/details/76696583

版权

动态实现选项卡的切换
这里写图片描述
代码实现如下：

    <style>
        *{padding:0px;margin:0px}
        body{padding:50px}
        #nav{list-style-type: none;height: 30px;}
        #nav li{width: 100px;height: 30px;line-height: 30px;border: 1px solid green;float: left;box-sizing: border-box;cursor: pointer;text-align: center;}
        #nav li:nth-child(2){border-width: 1px 0px 1px 0px;}
        #box div{width: 300px;height: 150px;border: 1px solid green;box-sizing: border-box;border-top: none;display: none;background:rgba(182,165,165,0.5)}
        #box .show{display: block;}
        #nav .active{background:rgba(182,165,165,0.5);border-bottom: none;}
        #nav li:hover{background:rgba(182,165,165,1);}
    </style>
    <body>
        <ul id="nav">
            <li class="active">第一部分</li>
            <li>第二部分</li>
            <li>第三部分</li>
        </ul>
    <div id="box">
        <div class="show"></div>
        <div></div>
        <div></div>
    </div>
    <script>
        $(function(){
            $li=$('#nav li')
            $li.click(function(){
                $(this).addClass('active').siblings().removeClass('active')
                $('#box div').eq($(this).index()).css('display','block')
                .siblings().css('display','none')
            })
        })
    </script>
</body>

芥须弥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用JQuery实现选项卡

动态实现选项卡的切换代码实现如下： <style> *{padding:0px;margin:0px} body{padding:50px} #nav{list-style-type: none;height: 30px;} #nav li{width: 100px;height: 30px;line-height: 30
复制链接

扫一扫