本文實(shí)例講述了JS實(shí)現(xiàn)的tab切換并顯示相應(yīng)內(nèi)容模塊功能。分享給大家供大家參考，具體如下：

思路：一層循環(huán)遍歷操作的元素并獲取當(dāng)前遍歷到的元素的下標(biāo)，通過下標(biāo)去選擇顯示對應(yīng)的內(nèi)容模塊。

二層循環(huán)將元素恢復(fù)操作前的狀態(tài)。

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; //存放當(dāng)前元素的下標(biāo)

fbLis[i].onclick = function(){

for(var j=0; j< fbLis.length; j++){

fbLis[j].className="";

aDivs[j].style.display = "none";

}

//給當(dāng)前點(diǎn)擊的元素添加活躍標(biāo)記

this.className="liactive";

//顯示對應(yīng)的模塊內(nèi)容

aDivs[this.index].style.display = "block";

};

}

• 首頁
• 產(chǎn)品
• 合作

首頁模塊內(nèi)容：這是首頁產(chǎn)品模塊內(nèi)容：這是產(chǎn)品合作模塊內(nèi)容：這是合作

感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具：http://tools.jb51.net/code/WebCodeRun測試上述代碼運(yùn)行效果。

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。