本文實例講述了JS實現的tab切換并顯示相應內容模塊功能。分享給大家供大家參考，具體如下：
思路：一層循環遍歷操作的元素并獲取當前遍歷到的元素的下標，通過下標去選擇顯示對應的內容模塊。
二層循環將元素恢復操作前的狀態。
<!--- JS -->
var fbUls =document.getElementById("oUl");var fbLis = fbUls.getElementsByTagName("li");var aDivs = document.getElementsByClassName("theDiv");for(var i = 0,val=fbLis.length;i<val;i++){ fbLis[i].index = i; //存放當前元素的下標 fbLis[i].onclick = function(){ for(var j=0; j< fbLis.length; j++){ fbLis[j].className=""; aDivs[j].style.display = "none"; } //給當前點擊的元素添加活躍標記 this.className="liactive"; //顯示對應的模塊內容 aDivs[this.index].style.display = "block"; };}<!-- HTML -->
<div> <ul id="oUl"> <li class="liactive">首頁</li> <li>產品</li> <li>合作</li> </ul></div><div class="theDiv" id="oDiv1" style="display:block;">首頁模塊內容：這是首頁</div><div class="theDiv" id="oDiv2">產品模塊內容：這是產品</div><div class="theDiv" id="oDiv3">合作模塊內容：這是合作</div>
<!-- 效果 -->
感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調試運行工具：http://tools.VeVB.COm/code/WebCodeRun測試上述代碼運行效果。
更多關于JavaScript相關內容可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
