huanggr
原生js选项卡实战教程，选项卡在页面中很常见，今天学习了下，记录下来。代码如下
原生js选项卡实战教程-源码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>原生js选项卡实现</title> <style> * { margin: 0; padding: 0; } .box { margin: 50px auto; width: 300px; height: 300px; border: 1px solid; overflow: hidden; } .bg { background-color: skyblue; } .box .btn { height: 20px; } .box .btn button { cursor: pointer; width: 50px; float: left; margin: 0 5px; } .box .content { height: 280px; } .box .content div { font-size: 60px; text-align: center; line-height: 280px; height: 280px; } </style> </head> <body> <div class="box"> <div class="btn"> <button>按钮A</button> <button>按钮B</button> <button>按钮C</button> <button>按钮D</button> <button>按钮E</button> </div> <div class="content"> <div>AAAAA</div> <div>BBBBB</div> <div>CCCCC</div> <div>DDDDD</div> <div>EEEEE</div> </div> </div> <script> var btns = document.querySelectorAll("button"); //获取元素 var content = document.querySelector(".content"); var divs = content.querySelectorAll("div"); // console.log(btns,content,divs); for (var i = 0; i < btns.length; i++) { //遍历获取按钮时所组成的数组(btns) btns[i].index = i; //给btns数组中所有的按钮设置一个下标，为了给下面的divs数组用。 btns[i].onclick = function () { //绑定点击事件 for (var j = 0; j < btns.length; j++) { //排他，把所有的清除和隐藏 //循环里面有事件处理函数, 执行顺序是先执行完毕循环, 再执行事件 //因为函数是通过事件调用的, 函数里面的this就是事件调用者 btns[j].className = ""; //让所有按钮的样式都清空 divs[j].style.display = "none"; //让所有div隐藏 } this.className = "bg"; divs[this.index].style.display = "block"; //this.index表示(btns)的下标，把他给divs用 // console.log(this.index); } } </script> </body> </html> |
原生js选项卡实战教程-效果图如下：
网友评论：
前辈，可以帮我看下我的代码问题吗？
ul中的display为什么没有值呀，求解。
嗯嗯，感谢，这个代码对我很有帮助。
不错，感谢。
非常好，值得推荐，非常不错的回答
7