1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 section { 8 width: 300px; 9 margin: 100px auto; 10 border: 1px solid #000; 11 } 12 13 button { 14 border: 0; 15 } 16 17 div { 18 width: 100%; 19 height: 300px; 20 background-color: pink; 21 display: none; 22 } 23 24 .current { 25 background-color: pink; 26 } 27 28 .show { 29 display: block; 30 } 31 </style> 32 </head> 33 <body> 34 <section> 35 <button class="current">第一个</button> 36 <button>第二个</button> 37 <button>第三个</button> 38 <button>第四个</button> 39 <button>第五个</button> 40 <div class="show">第一个盒子</div> 41 <div>第二个盒子</div> 42 <div>第三个盒子</div> 43 <div>第四个盒子</div> 44 <div>第五个盒子</div> 45 </section> 46 47 <script> 48 let btns = document.getElementsByTagName('button'); 49 let boxs = document.getElementsByTagName('div'); 50 for (let i = 0; i < btns.length; i++) { 51 btns[i].onclick = function () { 52 for (let j = 0; j < btns.length; j++) { 53 btns[j].className=''; 54 boxs[j].className=''; 55 } 56 this.className='current'; 57 boxs[i].className='show'; 58 } 59 } 60 </script> 61 </body> 62 </html>
tab栏切换原理（排他思想）
猜你喜欢
转载自www.cnblogs.com/ustc-yy/p/12072677.html
今日推荐
周排行