JS底层书写的简单Tab切换！

痛定思痛。 2023-01-18 09:20 225阅读 0赞

## Tab切换 ##

### 1.题目 ###

> 参照某宝网一个商品详情页，写出tab切换的功能，样式不限，实现功能即可（对dom元素操作）

### 2.写法与思路 ###

> （1）、对给到的要求我们首先去某宝网看一下效果图，可以清晰的发现，大的布局是用三个盒子形成的，整体一个大的盒子里面拥有头部和尾部，头部里面导航栏用**ul**和**li**来写的，尾部是用写有简单样式的盒子写的；  
> （2）、当点击头部导航栏目的某一个**li**标签的时候，其他**li**的样式不改变，当前的**li**的背影颜色变为设置的颜色，就是改变每一个**li**的背景颜色（**排他思想**）；  
> （3）、尾部盒子样式写好后，设置与头部里面对应li的数量一致的盒子个数，并且点击头部li时只出现一个底部盒子，那就要用底部父级盒子**溢出隐藏**；  
> （4）、关键的一步：当点击头部导航栏目的某一个**li**标签的时候，尾部里面的盒子随之变化，实现与之对应内容的变化，这就要思考一下如何让他们二者之间相对于起来？  
> （5）、解决方法：给头部li标签设置一个**索引值**并且获取当前点击的**li**元素的**索引值**，由于底部盒子的数量与头部**li**的数量保持一致，这就可以利用**索引值**的方式将二者联系起来。

### 3.实现功能图 ###

![在这里插入图片描述][20210505171440500.gif_pic_center]

### 4.参考代码 ###

<!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: 0px; padding: 0px; } .father{ width: 500px; height: 250px; margin: 100px auto; /* border: 1px solid blue; */ } ul{ width: 100%; height: 50px; /* border: 1px solid red; */ background-color: peru; } li{ list-style: none; width: 100px; height: 50px; /* border: 1px solid blue; */ float: left; text-align: center; line-height: 50px; font-weight: 900; font-size: 14px; color: white; } .active{ background-color: olivedrab; } .father .bot{ width: 500px; height: 200px; /* border: 1px solid black; */ } .bot>div{ width: 100%; height: 100%; text-align: center; font-weight: 900; font-size: 40px; line-height: 200px; background-color:peru; /* 现将写好的div样式隐藏起来 */ display: none; } </style>
    </head>
    <body>
        
        <div class="father">
            <ul class="top">
                <li class="item active">电脑</li>
                <li class="item">手机</li>
                <li class="item">X-box</li>
                <li class="item">数码相机</li>
                <li class="item">电视</li>
            </ul>
            
            <div class="bot">
                <div class="son" style="display: block;">iMAC</div>
                <div class="son">iPhone13</div>
                <div class="son">X-box</div>
                <div class="son">索尼AX800</div>
                <div class="son">小米电视</div>
            </div>
        </div>
       <script> var ul=document.querySelector(".top"); var li=ul.querySelectorAll("li") var son=document.querySelectorAll(".son") // console.log(li); //遍历一下所有的li for(var i=0;i<li.length;i++){ // 给每一个li编一个编号便于与下面的内容盒子相对应 li[i].setAttribute("index",i) li[i].onclick=function(){ //排他思想 for(var i=0;i<li.length;i++){ li[i].className=""; } this.className="item active"; // 获取当前点击的元素的index值 var index=this.getAttribute("index") // console.log(index); // 排除所有的son的样式 for(var i=0;i<son.length;i++){ son[i].style.display="none" } // 给当前对应的index值的display设置打开 son[index].style="display:block" } } </script>
    </body>
    </html>

### 5.总结 ###

Tab切换的写法很简单但就是实现头部与尾部的对应有些麻烦，仔细一想就挺简单的，核心思想，**排他思想**与用好**索引值**，欢迎大家来踩踩共同进步！！！

[20210505171440500.gif_pic_center]: /images/20221021/a13e1fb5ff674f508ab6d42b682f898f.png