js利用tab键切换当前页面_JS实现的tab页切换效果完整示例

本文实例讲述了JS实现的tab页切换效果。分享给大家供大家参考，具体如下：

效果图如下：

完整实例代码：

/p>

"http://www.w3.org/TR/html4/loose.dtd">

www.jb51.net JS实现的TAB切换

#content {

width: 400px;

height: 200px;

}

#tab_bar {

width: 400px;

height: 20px;

float: left;

}

#tab_bar ul {

padding: 0px;

margin: 0px;

height: 20px;

text-align: center;

}

#tab_bar li {

list-style-type: none;

float: left;

width: 133.3px;

height: 20px;

background-color: gray;

}

.tab_css {

width: 400px;

height: 200px;

background-color: orange;

display: none;

float: left;

}

var myclick = function(v) {

var llis = document.getElementsByTagName("li");

for(var i = 0; i < llis.length; i++) {

var lli = llis[i];

if(lli == document.getElementById("tab" + v)) {

lli.style.backgroundColor = "orange";

} else {

lli.style.backgroundColor = "gray";

}

}

var divs = document.getElementsByClassName("tab_css");

for(var i = 0; i < divs.length; i++) {

var divv = divs[i];

if(divv == document.getElementById("tab" + v + "_content")) {

divv.style.display = "block";

} else {

divv.style.display = "none";

}

}

}

• tab1

• tab2

• tab3

页面一

页面二

页面三

感兴趣的朋友可以使用本站在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。