原生js实现Tab切换(排他)功能

旧城等待， 2023-02-13 12:27 97阅读 0赞

## 原生js实现Tab切换(排他)功能 ##

在前端的面试中，一旦遇到笔试题，基本上都会有Tab切换，今天我们来说一下如何使用原生js实现Tab切换功能。如图：  
![在这里插入图片描述][20200529135110596.gif_pic_center]

**HTML代码：**

**CSS代码：**

* { 
                margin: 0;
                padding: 0;
                list-style: none;
            }
    
            .wrap { 
                width: 500px;
                height: 400px;
                background: pink;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
    
            .box { 
                width: 500px;
                height: 350px;
                position: absolute;
                left: 0;
                top: 50px;
                color: white;
                text-align: center;
                line-height: 350px;
                font-size: 150px;
            }
    
            .box:nth-of-type(1) { 
                background: red;
            }
    
            .box:nth-of-type(2) { 
                background: yellow;
            }
    
            .box:nth-of-type(3) { 
                background: blue;
            }
    
            .box:nth-of-type(4) { 
                background: green;
            }
    
            ul li { 
                width: 125px;
                height: 50px;
                float: left;
            }
    
            ul li:nth-of-type(1) { 
                background: red;
            }
    
            ul li:nth-of-type(2) { 
                background: yellow;
            }
    
            ul li:nth-of-type(3) { 
                background: blue;
            }
    
            ul li:nth-of-type(4) { 
                background: green;
            }

**JS代码：**

// 获取元素
        var aLi = document.getElementsByTagName("li");
        var aBox = document.getElementsByClassName("box");
    
        function none() { 
            for (var i = 0; i < aBox.length; i++) { 
                aBox[i].style.display = "none";
            }
        }
        none();
        aBox[0].style.display = "block";
    
        // 添加事件
        for(var i=0;i<aBox.length;i++){ 
            // 储存 i
            aLi[i].index=i;
            aLi[i].onclick=function(){ 
                none();
                aBox[this.index].style.display="block";
            }
        }
        
        
        // aLi[0].onclick = function () { 
        // none();
        // aBox[0].style.display = "block";
        // }
        // aLi[1].onclick = function () { 
        // none();
        // aBox[1].style.display = "block";
        // }
        // aLi[2].onclick = function () { 
        // none();
        // aBox[2].style.display = "block";
        // }
        // aLi[3].onclick = function () { 
        // none();
        // aBox[3].style.display = "block";
        // }

**注意**:其实实现Tab切换功能并不难，但是要注意怎样才能让代码最简洁。其中就要说道js部分的**for循环**的应用，关键点在于找一个变量储存每次遍历的索引。

**视频讲解链接：  
https://www.bilibili.com/video/BV1L5411x7Ao/**

[20200529135110596.gif_pic_center]: https://img-blog.csdnimg.cn/20200529135110596.gif#pic_center