利用jq做选项卡

最新推荐文章于 2021-01-26 17:55:03 发布

xieting153

最新推荐文章于 2021-01-26 17:55:03 发布

阅读量149

点赞数

分类专栏： jquery 文章标签：选项卡

本文链接：https://blog.csdn.net/xieting153/article/details/82292431

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

        *{
            margin: 0;
            padding: 0;
        }
        .title{
            overflow: hidden;
            width: 400px;
            display: flex;
            list-style: none;
            margin: auto;
        }
        .title li{
            flex: 1;
            text-align: center;
            height: 50px;
line-height: 50px;
border: 1px solid #ccc;
cursor: pointer;
}
.title li.current{
background: #24ccc8;
color: #f4f4f4;
}
.content{
display: none;
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
margin: auto;
background: papayawhip;
}
.content.current{
display: block;
}
</style>
</head>
<body>
<div id="div1">珠峰培训</div>
                     <ul class="title">
                                      <li class="current">JS</li>
                                                              <li>CSS</li>
                                                                       <li>VUE</li>
                                                                                </ul>
                                                                                  <div>
                                                                                  <div class="content current">JS</div>
                                                                                                                   <div class="content">CSS</div>
                                                                                                                                             <div class="content">VUE</div>
                                                                                                                                                                       </div>

                                                                                                                                                                         </body>
                                                                                                                                                                           </html>
                                                                                                                                                                             <script src="js/jquery-3.3.1.js"></script>
                                                                                                                                                                                                                <script>
                                                                                                                                                                                                                var $lis = $('ul>li');
var $contents = $('.content');
$lis.on('click',function () {
//this 指向原生的 点击的那个元素
//$(this) 把原生转成 JQ对象
$(this).addClass('current').siblings().removeClass('current');
    var n = $(this).index();
// $contents.eq(n).addClass('current').siblings().removeClass('current');
    $contents.eq(n).show().siblings().hide();
});

</script>

xieting153

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用jq做选项卡

*{ margin: 0; padding: 0; } .title{ overflow: hidden; width: 400px; display: flex; list-style: none; ...
复制链接

扫一扫

专栏目录