jQuery tab代码简单好用

最新推荐文章于 2023-04-08 20:34:11 发布

GLyihu

最新推荐文章于 2023-04-08 20:34:11 发布

阅读量160

点赞数

分类专栏： JS 文章标签： jquery html html5

本文链接：https://blog.csdn.net/GLyihu/article/details/119758110

版权

jQuery Tab切换前端开发 CSS HTML

关键词由CSDN通过智能技术生成

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

写了一个极简的tab代码，喜欢的拿去用，不喜勿喷。

html部分（要引入jQuery）

<div class="warp">
        <div class="tab_tit_haha">
            <span class="active">ceshi1</span>
            <span>ceshi2</span>
            <span>ceshi3</span>
        </div>
        <div class="tab_con_haha">
            <div class="item" style="display: block">这里是ceshi111111111111111的内容</div>
            <div>这里是ceshi222222222222222222的内容</div>
            <div>这里是ceshi333333333333333333的内容</div>
        </div>
    </div>
    <br /><br /><br /><br /><br />
    <div class="warp3">
        <div class="tab_tit_hihi">
            <span class="active">ceshi1</span>
            <span>ceshi2</span>
            <span>ceshi3</span>
        </div>
        <div class="tab_con_hihi">
            <div class="item" style="display: block">这里是ceshi111111111111111的内容</div>
            <div>这里是ceshi222222222222222222的内容</div>
            <div>这里是ceshi333333333333333333的内容</div>
        </div>
    </div>
    <br /><br /><br /><br /><br />
    <div class="warp2">
        <div class="tab_tit_hehe">
            <span class="active">ceshi1</span>
            <span>ceshi2</span>
            <span>ceshi3</span>
        </div>
        <div class="tab_con_hehe">
            <div class="item" style="display: block">这里是ceshi111111111111111的内容</div>
            <div>这里是ceshi222222222222222222的内容</div>
            <div>这里是ceshi333333333333333333的内容</div>
        </div>
    </div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

css部分

span {
            background: #eee;
        }
        
        .active {
            background: #999;
        }
        
        .tab_con_haha div,
        .tab_con_hehe div,
        .tab_con_hihi div {
            display: none;
        }

js部分

$(function() {
            const tabList = $('.tab_tit_haha span,.tab_tit_hehe span,.tab_tit_hihi span');
            const contentList = $('.tab_con_haha div,.tab_con_hehe div,.tab_con_hihi div');
            for (let index = 0; index < tabList.length; index++) {
                const element = $(tabList[index]);
                element.click(function() {
                    $(this).addClass('active').siblings().removeClass('active');
                    $(contentList[index]).show().siblings().hide();
                });
            }
        });

最后贴一个所有代码，方便大家直接拿着用，修改下样式就行了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        span {
            background: #eee;
        }
        
        .active {
            background: #999;
        }
        
        .tab_con_haha div,
        .tab_con_hehe div,
        .tab_con_hihi div {
            display: none;
        }
    </style>
</head>

<body>
    <div class="warp">
        <div class="tab_tit_haha">
            <span class="active">ceshi1</span>
            <span>ceshi2</span>
            <span>ceshi3</span>
        </div>
        <div class="tab_con_haha">
            <div class="item" style="display: block">这里是ceshi111111111111111的内容</div>
            <div>这里是ceshi222222222222222222的内容</div>
            <div>这里是ceshi333333333333333333的内容</div>
        </div>
    </div>
    <br /><br /><br /><br /><br />
    <div class="warp3">
        <div class="tab_tit_hihi">
            <span class="active">ceshi1</span>
            <span>ceshi2</span>
            <span>ceshi3</span>
        </div>
        <div class="tab_con_hihi">
            <div class="item" style="display: block">这里是ceshi111111111111111的内容</div>
            <div>这里是ceshi222222222222222222的内容</div>
            <div>这里是ceshi333333333333333333的内容</div>
        </div>
    </div>
    <br /><br /><br /><br /><br />
    <div class="warp2">
        <div class="tab_tit_hehe">
            <span class="active">ceshi1</span>
            <span>ceshi2</span>
            <span>ceshi3</span>
        </div>
        <div class="tab_con_hehe">
            <div class="item" style="display: block">这里是ceshi111111111111111的内容</div>
            <div>这里是ceshi222222222222222222的内容</div>
            <div>这里是ceshi333333333333333333的内容</div>
        </div>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function() {
            const tabList = $('.tab_tit_haha span,.tab_tit_hehe span,.tab_tit_hihi span');
            const contentList = $('.tab_con_haha div,.tab_con_hehe div,.tab_con_hihi div');
            for (let index = 0; index < tabList.length; index++) {
                const element = $(tabList[index]);
                element.click(function() {
                    $(this).addClass('active').siblings().removeClass('active');
                    $(contentList[index]).show().siblings().hide();
                });
            }
        });
    </script>
</body>

</html>

补充：页面里只用一次tab切换代码：

$(function() {
$(".col-md-4").click(function() {
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
$(".connmap").eq(index).show().siblings().hide();
});
})

GLyihu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery tab代码简单好用

写了一个极简的tab代码，喜欢的拿去用，不喜勿喷。html部分（要引入jQuery）<div class="warp"> <div class="tab_tit_haha"> <span class="active">ceshi1</span> <span>ceshi2</span> <span>ceshi3</span&
复制链接

扫一扫