選項卡這個效果估計以后的項目會經常涉及到，對代碼還是半熟練的情況下還是寫下來吧。
先來布局一個簡單的頁面：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} #box{margin: 50px;} #box li{width: 100px;height: 40px;line-height: 40px;text-align: center;background-color: #d8d8d8;margin-right: 2px;float: left;} #box .active{background: red;} #content{clear: both;} #content div{width: 404px;height: 200px;border: 1px solid #d8d8d8;display: none;} </style> </head> <body> <div id="box"> <!--這個ul為選項卡的菜單，提供選擇項，并且設置其中一個li為默認樣式--> <ul> <li class="active">新聞</li> <li>社會</li> <li>科技</li> <li>娛樂</li> </ul> <!--這個div為選項卡的內容，顯示不同菜單的不同內容，并且設置其中一個div為可見，其他隱藏--> <div id="content"> <div style="display: block;">新聞</div> <div>社會</div> <div>科技</div> <div>娛樂</div> </div> </div> </body></html>選項卡的制作原理是：有若干的選項和對應數量的內容，當對其中一個選項進行操作時，顯示對應內容，其他內容不顯示。所以，在頁面布局的時候，我們先給一個選項設置特殊樣式和顯示其對應的內容，其他選項樣式不變，對應內容隱藏。當操作選項時，把選項的類名改為特殊樣式的類名，并且顯示對應內容。
<script type="text/javascript"> window.onload=function(){ var oBox=document.getElementById('box'); var aLi=oBox.getElementsByTagName('li'); var oCon=document.getElementById('content'); var aDiv=oCon.getElementsByTagName('div'); for(var i=0;i<aLi.length;i++){ aLi[i].index=i; //為每個li添加對應的索引index aLi[i].onclick=function(){ //循環為每個li添加onclick事件 for(var i=0;i<aLi.length;i++){ aLi[i].className=''; //循環清空li樣式 aDiv[i].style.display='none'; //循環隱藏所有div } this.className='active'; //當前點擊的元素樣式變成active aDiv[this.index].style.display='block'; //this.index 獲取當前li對應的索引 } } }</script>今天在做選項卡效果時遇到了一個非常低級的錯誤，但卻遲遲找不到原因，如下：
這個是我布局的選項卡的菜單，看起來很簡單，一個ul包著3個li，其中一個是 |，所以可以點擊的菜單項只有兩項，沒毛病。
<ul id="text"> <li class="active"><a href="javascript:" rel="external nofollow" rel="external nofollow" >必備軟件</a></li> <li id="shu">|</li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" >常用軟件</a></li></ul>
新聞熱點
疑難解答
圖片精選
