js利用tab键切换当前页面_JS实现的简单tab切换功能完整示例

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

www.jb51.net tab切换

* {

padding: 0;

margin: 0

}

body {

font-size: 12px

}

ul, li, ol {

list-style: none

}

a {

text-decoration: none

}

.clearfix {

clear: both;

overflow: hidden

}

.tab_title ul li {

float: left;

padding: 0 10px

}

• TAB1
• TAB2
• TAB3

con_one_1

con_one_2

con_one_3

//tab切换效果

function setTab(name, cursel, n) {

for(var i = 1; i <= n; i++) {

var menu = document.getElementById(name + i);

var con = document.getElementById("con_" + name + "_" + i);

menu.className = i == cursel ? "cur" : "";

con.style.display = i == cursel ? "block" : "none";

}

}

运行结果：

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

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