使用JQuery实现选项卡

来源：互联网发布：matlab 剔除重复数据编辑：程序博客网时间：2024/06/03 22:26

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

    <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 0