前端实现tab栏切换，这么常见的案例你学会了吗？

发布时间：2024-04-21 17:01

📋 个人简介

💖 作者简介：大家好，我是阿牛，全栈领域新星创作者。😜
📝 个人主页：馆主阿牛🔥
🎉 支持我：点赞👍+收藏⭐️+留言📝
📣 系列专栏：硬泡 javascript🍁
💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥
$\"请添加图片描述\"$

前些天发现了一个比较好的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。

上期传送门：
👉初识 JavaScript（揭开javascript的神秘面纱）
👉javascript中的数据类型
👉javascript中的数据类型转换
👉javascript 基础案例（循环）
👉面试官最爱考的 javascript 预解析，你搞明白了吗？
👉“撩过”c++的对象，“拿捏”了python的对象，你还怕拿不下javascript的对象吗？
👉javascript 内置对象Math总结及其案例
👉 javascript 内置对象Date总结及案例
👉解锁前端密码框常见功能做法
👉前端实现动态生成表格，是蒸的C
👉四行js代码让别人无法复制你的网站文字，八行程序员都哭了
👉这些前端案例看似很简单（内附动图）

🌟前言

tab栏切换制作是我们web开发中一个十分常见的案例，今天在这里写写，希望对大家有所帮助，还是要用到我们上节写到的排他思想！好好学哦！

✨思路

1.循环为每个小li注册事件，在注册事件之前同时为点击的小li添加自定义属性index用来保存索引号。
2.用排他思想，点击小li后首先循环通过改变className去掉所有按钮背景色（干掉其他人），然后为点击的按钮添加class增加背景色（留下我自己）。
3.循环将下面显示区的display属性设置为none,然后获取你当前点击的li的index属性值，这个索引和下面的div是对应的，最终将这个index对应的div的display属性设置为block就可以了。还是排他思想。

$\"在这里插入图片描述\"$

✨代码

💥原生版

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .tab{
            width: 38%;
            height: 400px;
            margin: 100px auto;
        }
        .tab_list{
            width: 100%;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-bottom: 1px solid #e4393c;
        }
        .current {
            background-color: #e4393c;
            color: #fff;
        }
        .tab_list li{
            font: 14px Microsoft YaHei;
            display: inline-block;
            padding:9px 25px;
        }
        .tab_list li:hover{
            cursor: pointer;
        }
        .tab_con{
            width: 100%;
            height: 360px;
            border: 1px solid #eee;
            border-top: none;

        }
        .tab_con .item{
            height: 100%;
            display: none;
            font-size: 13px;
            text-indent: 13px;

        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display:block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障
            </div>
            <div class="item">
                商品评价
            </div>
            <div class="item">
                手机社区
            </div>
        </div>
    </div>
    <script>
        var lis = document.querySelector('.tab_list').querySelectorAll('li');
        var divs = document.querySelector('.tab_con').querySelectorAll('div');
        for (var i=0;i<lis.length;i++){
            lis[i].setAttribute('index',i); //给5个小li设置索引号
            lis[i].onclick = function(){
                // 1.上面的模块选项卡，点击一个，他的底色变成红色
                // 排他思想  
                // 消除所有人
                for (var j=0;j<lis.length;j++){
                    lis[j].className = '';
                }
                // 保留我自己
                this.className = 'current';  //this 指向事件函数的调用者
                // 2.下面的显示内容模块
                for (var k=0;k<divs.length;k++){
                     // 消除所有人
                    divs[k].style.display = 'none';
                }
                var index = this.getAttribute('index');
                 // 保留我自己
                divs[index].style.display = 'block';
            }
        }
    </script> 
</body>
</html>

💥jquery版

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
       $(function(){
         $(".tab_list li").click(function(){
            $(".tab_list li").removeClass("current");  //干掉所有人
             $(this).addClass("current");   //留下我自己

            var index = $(this).index();
            $(".tab_con .item").hide();   //干掉所有人
            $(".tab_con .item").eq(index).show();  //留下我自己
            });
     });

可以看到js代码就一点点，写起来很简单的，代码长的还是我们的html和css,所以我们的js基础不难，赶紧冲冲冲~~~

✨动图演示

$\"请添加图片描述\"$
下面变化的内容都在一大块div中，你们想要怎么布局自己设计就好，不需要再写js了。

🌟结语

陆陆续续写了很多前端基础知识和小demo了，这些对初学者都很有用，我把他们都放在我的专栏里了，精心打造了软磨硬泡系列，一起来学习吧！

🏰系列专栏
👉软磨 css
👉硬泡 javascript
👉前端实用小demo