本文實例講述了JS實現的tab切換并顯示相應內容模塊功能。分享給大家供大家參考，具體如下：

思路：一層循環遍歷操作的元素并獲取當前遍歷到的元素的下標，通過下標去選擇顯示對應的內容模塊。

二層循環將元素恢復操作前的狀態。

var fbUls =document.getElementById("oUl");

var fbLis = fbUls.getElementsByTagName("li");

var aDivs = document.getElementsByClassName("theDiv");

for(var i = 0,val=fbLis.length;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/CSS/JavaScript前端代碼調試運行工具：http://tools.jb51.net/code/WebCodeRun測試上述代碼運行效果。

希望本文所述對大家JavaScript程序設計有所幫助。

總結

以上是生活随笔為你收集整理的js利用tab键切换当前页面_JS实现的tab切换并显示相应内容模块功能示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。