（16）JS實現簡單的選項卡
阿新 • • 發佈：2019-01-29
思路：
在選項卡中，選中的選項卡會高亮顯示，這裡使用yellow顏色代替，這裡使用class新增相應的屬性（此處顯示黃色作為高亮顯示）當然必須先獲取當前的選項卡內容，於是為每個屬性動態設定一個index屬性，並且為每個選項卡按鈕新增onclick事件，每個事件中處理過程是這樣的：先將所有的class清除，也就是沒有一個選項卡顯示高亮顯示的樣式，將所有選項卡都隱藏起來，採用this，設定class名稱為高亮顯示的那個名稱，從而使當前選項卡獲得高亮顯示的樣式，並且將其display屬性設定為block，即顯示出來。
<!DOCTYPE HTML> <!-- --> <html> <head> <meta charset="utf-8"> <title></title> <style> #div1 .active{background:yellow;} #div1 div{width:200px;height:200px;background:#ccc;border:1px solid #999;display:none;} </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); var aBtn=oDiv.getElementsByTagName('input'); var aDiv=oDiv.getElementsByTagName('div'); for(var i=0;i<aBtn.length;i++){ aBtn[i].index=i;//為每個按鈕標籤設定一個index屬性 aBtn[i].onclick=function(){ for(var i=0;i<aBtn.length;i++){ aBtn[i].className='';//將所有的className置為空，即沒有哪個是高亮顯示是當前選項卡是哪個 aDiv[i].style.display='none';// 將當前的div全部隱藏起來 } //alert(this.value); this.className='active';//此處只顯示一個高亮，即選中的那個選項卡 aDiv[this.index].style.display='block';//顯示當前的選項卡，主要通過index確定選定的選項卡是哪個 }; } }; </script> </head> <body> <div id="div1"> <input class="active" type="button" value="教育"/> <input type="button" value="培訓"/> <input type="button" value="招生"/> <input type="button" value="出國"/> <div style="display:block;">1111</div> <div>2222</div> <div>3333</div> <div>4444</div> </div> </body> </html>
效果圖：
