js利用tab键切换当前页面_JS实现的tab切换并显示相应内容模块功能示例

本文实例讲述了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程序设计有所帮助。