導航欄選項卡 · JavaScript學習記錄

### 導航欄選項卡 - 按鈕的實現 - 添加事件 - this 的使用: 指當前發生事件的元素 - 先清空所有按鈕，再選中當前按鈕 - 內容的實現（ul） - 先隱藏所有 ul，再顯示當前 ul - 索引值的使用：什么時候用索引值 - HTML 添加 index 會被 FireFox 過濾 - JS 添加 index - 代碼: ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>導航選項卡</title> <style> body { margin: 0; padding: 0; } #div2 { width: 200px; height: 200px; margin-top: 20px; position: relative; } #div1 { width: 200px; height: 20px; position: absolute; top: 0px; } ul { margin: 0; padding: 0; display: block; background: rgb(157, 234, 253); float: left; position: absolute; display: none; width: 200px; height: 200px; } .ul { display: block; } a { display: block; float: left; width: 49px; height: 20px; background: rgb(7, 184, 253); border-left: 1px solid rgb(255, 0, 234); text-decoration: none; } .a { background: rgb(32, 108, 221); } </style> <script> window.onload = function (){ // 封裝 getElementById 函數 function get(id) { return document.getElementById(id); } // 封裝 getElementsByTagName function gets(tagName) { return document.getElementsByTagName(tagName) } // 顯示第一個元素 gets('ul')[0].className = 'ul'; // 當鼠標覆蓋某個標簽時顯示對應元素 for (var i = 0; i < 4; i++) { gets('a')[i].index = i; gets('a')[i].onmouseover = function () { for (var a = 0; a < 4; a++) { gets('ul')[a].className = ''; gets('a')[a].className = ''; } // console.log(this); gets('ul')[this.index].className = 'ul'; this.className = 'a'; } } } </script> </head> <body> <div id="div1"> <a href="javascript:;" id="a0">1</a> <a href="javascript:;" id="a1">2</a> <a href="javascript:;" id="a2">3</a> <a href="javascript:;" id="a3">4</a> </div> <div id="div2"> <ul> <li>1</li> <li>1</li> <li>1</li> </ul> <ul> <li>2</li> <li>2</li> <li>2</li> </ul> <ul> <li>3</li> <li>3</li> <li>3</li> </ul> <ul> <li>4</li> <li>4</li> <li>4</li> </ul> </div> </body> </html> ```