原生js实现Tab切换(排他)功能
在前端的面试中，一旦遇到笔试题，基本上都会有Tab切换，今天我们来说一下如何使用原生js实现Tab切换功能。如图：
在这里插入图片描述
HTML代码：
<divclass="wrap"><divclass="box">1</div><divclass="box">2</div><divclass="box">3</div><divclass="box">4</div><ul><li></li><li></li><li></li><li></li></ul></div>
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(vari=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/
