本文實例講述了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>
<!-- 效果 -->
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
