1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"></meta> 5 <title>js-tab切换处理</title> 6 <style> 7 .box{ 8 width: 400px; 9 margin: 100px auto; 10 border: 1px solid #cccccc; 11 } 12 /*让底部所有的div隐藏*/ 13 .bottom div{ 14 width: 100%; 15 height: 300px; 16 background-color: pink; 17 display: none; 18 } 19 /*让底部class为show的显示出来*/ 20 .bottom .show{ 21 display: block; 22 } 23 .tab_select{ 24 background-color: rosybrown; 25 } 26 </style> 27 <script> 28 window.onload = function () { 29 //1.拿到所有的button 30 var btns = document.getElementsByTagName("button"); 31 //2.拿到所有的bottom div 32 var divs = document.getElementById("divs").getElementsByTagName("div"); 33 //3.循环遍历所有的button 34 for(var i=0; i<btns.length; i++){ 35 //添加一个属性 index, setAttribute 添加自定义属性 36 btns[i].index = i; 37 //给所有的button添加事件 38 btns[i].onclick = function () { 39 //把所有的btn 类名都设置为 空 40 for(var j=0; j<btns.length; j++){ 41 btns[j].className = ""; //先把全部的都类名都设置空 42 divs[j].className = ""; //把全部的div 都隐藏 43 } 44 //设置当前button为选中 45 this.className = "tab_select"; 46 //显示出对应的div 47 divs[this.index].className = "show"; 48 console.log(this.index); 49 } 50 } 51 52 } 53 </script> 54 </head> 55 <body> 56 <div class="box"> 57 <div class="top"> 58 <button class="tab_select">第一个</button> 59 <button>第二个</button> 60 <button>第三个</button> 61 <button>第四个</button> 62 <button>第五个</button> 63 </div> 64 <div class="bottom" id="divs"> 65 <div class="show">1号盒子</div> 66 <div>2号盒子</div> 67 <div>3号盒子</div> 68 <div>4号盒子</div> 69 <div>5号盒子</div> 70 </div> 71 </div> 72 </body> 73 <script> 74 75 </script> 76 </html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
