tab欄切換 · JavaScript

## 案例 ``` <style> * { margin: 0; padding: 0; } ul { list-style-type: none; } .box { width: 400px; height: 300px; border: 1px solid #ccc; margin: 100px auto; overflow: hidden; } .hd { height: 45px; } .hd span { display: inline-block; width: 90px; background-color: pink; line-height: 45px; text-align: center; cursor: pointer; } .hd span.current { background: purple; } .bd div { height: 255px; background-color: purple; display: none; } .bd div.current { display: block; } </style> </head> <body> <div class="box"> <div id="hd" class="hd"> <span class="current">體育</span> <span>娛樂</span> <span>新聞</span> <span>綜合</span> </div> <div id="bd" class="bd"> <div class="current">我是體育板塊</div> <div>我是娛樂板塊</div> <div>我是新聞板塊</div> <div>我是綜合板塊</div> </div> </div> <script> function $(id) { return document.getElementById(id); } var hd = $('hd'); var spans = hd.getElementsByTagName('span'); for (let i = 0; i < spans.length; i++) { var span = spans[i]; //通過自定義屬性,記錄當前span的索引 span.setAttribute('index', i); //注冊事件 span.onmouseover = fn; } //function之所以寫在這里,是為了優化和不讓代碼嵌套過多 //鼠標經過事件處理 function fn() { //讓所有span取消高亮 for (let i = 0; i < spans.length; i++) { var span = spans[i]; span.className = ''; } //當前的span高亮顯示 this.className = 'current'; //tab欄對應的DIV顯示,其他DIV隱藏 var bd = $('bd'); var divs = bd.getElementsByTagName('div'); for (let i = 0; i < divs.length; i++) { var div = divs[i]; div.className = ''; } //當前span對應的div顯示,獲取自定義屬性的值 var index = parseInt(this.getAttribute('index')); divs[index].className = 'current'; } </script> ```