演示地址：http://www.adanghome.com/js_demo/3/
===========================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿当制作</title>
<style type="text/css">
.mt30{margin-top:30px;}
.none{display:none;}
</style>
<script type="text/javascript">
getElementsByClassName = function(str,root,tag){
if(root){
root = typeof root == "string" ? document.getElementById(root) : root;
} else {
root = document.body;
}
tag = tag || "*";
var els = root.getElementsByTagName(tag),arr = [];
for(var i=0,n=els.length;i<n;i++){
for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){
if(k[j] == str){
arr.push(els[i]);
break;
}
}
}
return arr;
}
</script>
</head>
<body>
<h1>怎么写tab</h1>
<!-- 版本1开始 -->
<style type="text/css">
#t1_m1,#t1_m2,#t1_m3{padding:5px;border:dashed 1px #333;margin:0 5px;}
</style>
<p>=====================================================</p>
<h2>版本一</h2>
<div id="demo1">
<div>
<span id="t1_m1">menu1</span>
<span id="t1_m2">menu2</span>
<span id="t1_m3">menu3</span>
</div>
<div id="t1_c1" class="mt30">11111</div>
</div>
<script type="text/javascript">
(function(){
var menu1 = document.getElementById("t1_m1"),
menu2 = document.getElementById("t1_m2"),
menu3 = document.getElementById("t1_m3"),
content = document.getElementById("t1_c1");
menu1.onclick = function(){
content.innerHTML = "11111";
}
menu2.onclick = function(){
content.innerHTML = "22222";
}
menu3.onclick = function(){
content.innerHTML = "33333";
}
})();
</script>
<!-- 版本1结束 -->
<!-- 版本2开始 -->
<style type="text/css">
#t2_m1,#t2_m2,#t2_m3{padding:5px;border:dashed 1px #333;margin:0 5px;}
#t2_c2,#t2_c3{display:none;}
</style>
<p>=====================================================</p>
<h2>版本二</h2>
<div id="demo2">
<div>
<span id="t2_m1">menu1</span>
<span id="t2_m2">menu2</span>
<span id="t2_m3">menu3</span>
</div>
<div class="mt30">
<div id="t2_c1">11111</div>
<div id="t2_c2">22222</div>
<div id="t2_c3">33333</div>
</div>
</div>
<script type="text/javascript">
(function(){
var menu1 = document.getElementById("t2_m1"),
menu2 = document.getElementById("t2_m2"),
menu3 = document.getElementById("t2_m3"),
content1 = document.getElementById("t2_c1"),
content2 = document.getElementById("t2_c2"),
content3 = document.getElementById("t2_c3");
menu1.onclick = function(){
content1.style.display = "block";
content2.style.display = "none";
content3.style.display = "none";
}
menu2.onclick = function(){
content1.style.display = "none";
content2.style.display = "block";
content3.style.display = "none";
}
menu3.onclick = function(){
content1.style.display = "none";
content2.style.display = "none";
content3.style.display = "block";
}
})();
</script>
<!-- 版本2结束 -->
<!-- 版本3开始 -->
<style type="text/css">
#tab_menu span{padding:5px;border:dashed 1px #333;margin:0 5px;}
</style>
<p>=====================================================</p>
<h2>版本三</h2>
<div id="demo3">
<div id="tab_menu">
<span>menu1</span>
<span>menu2</span>
<span>menu3</span>
<span>menu4</span>
</div>
<div id="tab_content" class="mt30">
<div>11111</div>
<div class="none">22222</div>
<div class="none">33333</div>
<div class="none">44444</div>
</div>
</div>
<script type="text/javascript">
(function(){
var menus = document.getElementById("tab_menu").getElementsByTagName("span"),
contents = document.getElementById("tab_content").getElementsByTagName("div");
for(var i = 0,n=menus.length;i<n;i++){
(function(n){
menus[n].onclick = function(){
showContent(n);
}
})(i);
}
function showContent(index){
for(var i=0,n=contents.length;i<n;i++){
if(i==index){
contents[i].style.display = "block";
} else {
contents[i].style.display = "none";
}
}
}
})();
</script>
<!-- 版本3结束 -->
<!-- 版本4开始 -->
<style type="text/css">
#demo4-1 ul{padding:0;margin:0}
.demo41_tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}
</style>
<p>=====================================================</p>
<h2>版本四</h2>
<div id="demo4-1">
<ul>
<li class="demo41_tabMenu">menu1</li>
<li class="demo41_tabMenu">menu2</li>
<li class="demo41_tabMenu">menu3</li>
</ul>
<div class="mt30">
<div class="demo41_tabContent">11111<div>一一一一一一一</div></div>
<div class="demo41_tabContent none">22222<div>二二二</div></div>
<div class="demo41_tabContent none">33333</div>
</div>
</div>
<div id="demo4-2">
<p>
<input type="radio" name="sex" id="male" class="demo42_tabMenu" checked /> <label for="male">男</label>
<input type="radio" name="sex" id="female" class="demo42_tabMenu" /> <label for="female">女</label>
</p>
<div class="mt30">
<div class="demo42_tabContent">I'm a boy</div>
<div class="demo42_tabContent none">I'm a girl</div>
</div>
</div>
<script type="text/javascript">
(function(){
var menus = getElementsByClassName("demo41_tabMenu","demo4-1"),
contents = getElementsByClassName("demo41_tabContent","demo4-1"),
menus2 = getElementsByClassName("demo42_tabMenu","demo4-2"),
contents2 = getElementsByClassName("demo42_tabContent","demo4-2");
for(var i = 0,n=menus.length;i<n;i++){
(function(n){
menus[n].onclick = function(){
showContent(n);
}
})(i);
}
function showContent(index){
for(var i=0,n=contents.length;i<n;i++){
if(i==index){
contents[i].style.display = "block";
} else {
contents[i].style.display = "none";
}
}
}
for(var i = 0,n=menus2.length;i<n;i++){
(function(n){
menus2[n].onclick = function(){
showContent2(n);
}
})(i);
}
function showContent2(index){
for(var i=0,n=contents2.length;i<n;i++){
if(i==index){
contents2[i].style.display = "block";
} else {
contents2[i].style.display = "none";
}
}
}
})();
</script>
<!-- 版本4结束 -->
<!-- 版本5开始 -->
<style type="text/css">
#demo5-1 ul,#demo5-2 ul{padding:0;margin:0}
#demo5-1 .tabMenu,#demo5-2 .tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}
</style>
<p>=====================================================</p>
<h2>版本五</h2>
<div id="demo5-1">
<ul>
<li class="tabMenu">menu1</li>
<li class="tabMenu">menu2</li>
<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
<div class="tabContent none">33333</div>
</div>
</div>
<div id="demo5-2" class="mt30">
<ul>
<li class="tabMenu">menu1</li>
<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>
<script type="text/javascript">
(function(){
function createTab(root){
var menus = getElementsByClassName("tabMenu",root),
contents = getElementsByClassName("tabContent",root);
for(var i = 0,n=menus.length;i<n;i++){
(function(n){
menus[n].onclick = function(){
showContent(n);
}
})(i);
}
function showContent(index){
for(var i=0,n=contents.length;i<n;i++){
if(i==index){
contents[i].style.display = "block";
} else {
contents[i].style.display = "none";
}
}
}
}
createTab("demo5-1");
createTab("demo5-2");
})();
</script>
<!-- 版本5结束 -->
<!-- 版本6开始 -->
<style type="text/css">
#demo6-1 ul,#demo6-2 ul{padding:0;margin:0}
#demo6-1 .tabMenu,#demo6-2 .tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}
.demo61-tabMenu-selected{background:blue;color:#fff;}
.demo62-tabMenu-selected{background:green;color:#fff;}
</style>
<p>=====================================================</p>
<h2>版本六</h2>
<div id="demo6-1">
<ul>
<li class="tabMenu demo61-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
<div class="tabContent none">33333</div>
</div>
</div>
<div id="demo6-2" class="mt30">
<ul>
<li class="tabMenu demo62-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>
<script type="text/javascript">
(function(){
function createTab(root,selectMenuClassname,eventType){
var menus = getElementsByClassName("tabMenu",root),
contents = getElementsByClassName("tabContent",root),
selectMenuClassname = selectMenuClassname || "",
eventType = eventType || "click";
for(var i = 0,n=menus.length;i<n;i++){
(function(n){
menus[n]["on"+eventType] = function(){
showContent(n);
if(selectMenuClassname){
focusMenu(n);
}
}
})(i);
}
function showContent(index){
for(var i=0,n=contents.length;i<n;i++){
if(i==index){
contents[i].style.display = "block";
} else {
contents[i].style.display = "none";
}
}
}
function focusMenu(index){
var menuFocused = getElementsByClassName(selectMenuClassname,root)[0];
menuFocused.className = menuFocused.className.split(selectMenuClassname).join(" ");
menus[index].className += " " + selectMenuClassname;
}
}
createTab("demo6-1","demo61-tabMenu-selected");
createTab("demo6-2","demo62-tabMenu-selected","mouseover");
})();
</script>
<!-- 版本6结束 -->
<!-- 版本7开始 -->
<style type="text/css">
#demo7-1 ul,#demo7-2 ul{padding:0;margin:0}
#demo7-1 .tabMenu,#demo7-2 .tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}
.demo71-tabMenu-selected{background:blue;color:#fff;}
.demo72-tabMenu-selected{background:green;color:#fff;}
</style>
<p>=====================================================</p>
<h2>版本七</h2>
<div id="demo7-1">
<ul>
<li class="tabMenu demo71-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
<div class="tabContent none">33333</div>
</div>
</div>
<div id="demo7-2" class="mt30">
<ul>
<li class="tabMenu demo72-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>
<script type="text/javascript">
(function(){
function createTab(root,selectMenuClassname,eventType,autoPlay,stayTime,callback){
var menus = getElementsByClassName("tabMenu",root),
contents = getElementsByClassName("tabContent",root),
selectMenuClassname = selectMenuClassname || "",
eventType = eventType || "click",
autoPlay = autoPlay || false,
stayTime = stayTime || 5000,
currentIndex = 0;
for(var i = 0,n=menus.length;i<n;i++){
(function(n){
menus[n]["on"+eventType] = function(){
showItem(n);
}
})(i);
}
if(autoPlay){
setInterval(function(){
itemsCount = menus.length;
currentIndex = currentIndex >= itemsCount - 1 ? 0 : currentIndex+1 ;
showItem(currentIndex);
},stayTime);
}
function showItem(index){
showContent(index);
if(selectMenuClassname){
focusMenu(index);
}
if(callback){
callback(index);
}
}
function showContent(index){
currentIndex = index;
for(var i=0,n=contents.length;i<n;i++){
if(i==index){
contents[i].style.display = "block";
} else {
contents[i].style.display = "none";
}
}
}
function focusMenu(index){
var menuFocused = getElementsByClassName(selectMenuClassname,root)[0];
menuFocused.className = menuFocused.className.split(selectMenuClassname).join(" ");
menus[index].className += " " + selectMenuClassname;
}
}
createTab("demo7-1","demo71-tabMenu-selected",null,true,8000);
createTab("demo7-2","demo72-tabMenu-selected","mouseover",null,null,function(index){alert("您激活了第"+(index+1)+"个tab项");});
})();
</script>
<!-- 版本7结束 -->
<!-- 版本8开始 -->
<style type="text/css">
#demo8-1 ul,#demo8-2 ul{padding:0;margin:0}
#demo8-1 .tabMenu,#demo8-2 .tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}
.demo81-tabMenu-selected{background:blue;color:#fff;}
.demo82-tabMenu-selected{background:green;color:#fff;}
</style>
<p>=====================================================</p>
<h2>版本八</h2>
<div id="demo8-1">
<ul>
<li class="tabMenu demo81-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
<div class="tabContent none">33333</div>
</div>
</div>
<div id="demo8-2" class="mt30">
<ul>
<li class="tabMenu demo82-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>
<script type="text/javascript">
(function(){
function createTab(config){
var root = config.root,
menus = getElementsByClassName("tabMenu",root),
contents = getElementsByClassName("tabContent",root),
selectMenuClassname = config.selectMenuClassname || "",
eventType = config.eventType || "click",
autoPlay = config.autoPlay || false,
stayTime = config.stayTime || 5000,
callback = config.callback || null,
currentIndex = 0;
for(var i = 0,n=menus.length;i<n;i++){
(function(n){
menus[n]["on"+eventType] = function(){
showItem(n);
}
})(i);
}
if(autoPlay){
setInterval(function(){
itemsCount = menus.length;
currentIndex = currentIndex >= itemsCount - 1 ? 0 : currentIndex+1 ;
showItem(currentIndex);
},stayTime);
}
function showItem(index){
showContent(index);
if(selectMenuClassname){
focusMenu(index);
}
if(callback){
callback(index);
}
}
function showContent(index){
currentIndex = index;
for(var i=0,n=contents.length;i<n;i++){
if(i==index){
contents[i].style.display = "block";
} else {
contents[i].style.display = "none";
}
}
}
function focusMenu(index){
var menuFocused = getElementsByClassName(selectMenuClassname,root)[0];
menuFocused.className = menuFocused.className.split(selectMenuClassname).join(" ");
menus[index].className += " " + selectMenuClassname;
}
}
createTab({root:"demo8-1",selectMenuClassname:"demo81-tabMenu-selected",autoPlay:true,stayTime:8000});
createTab({root:"demo8-2",selectMenuClassname:"demo82-tabMenu-selected",eventType:"mouseover",callback:function(index){alert("您激活了第"+(index+1)+"个tab项");}});
})();
</script>
<!-- 版本8结束 -->
<!-- 版本9开始 -->
<style type="text/css">
#demo9-1 ul,#demo9-2 ul{padding:0;margin:0}
#demo9-1 .tabMenu,#demo9-2 .tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}
.demo91-tabMenu-selected{background:blue;color:#fff;}
.demo92-tabMenu-selected{background:green;color:#fff;}
</style>
<p>=====================================================</p>
<h2>版本九</h2>
<div id="demo9-1">
<ul>
<li class="tabMenu demo91-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
<div class="tabContent none">33333</div>
</div>
</div>
<p><input type="button" value="激活第3个tab" id="btn" /></p>
<div id="demo9-2" class="mt30">
<ul>
<li class="tabMenu demo92-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>
</div>
<script type="text/javascript">
(function(){
function Tab(config){
this.root = config.root,
this.menus = getElementsByClassName("tabMenu",this.root),
this.contents = getElementsByClassName("tabContent",this.root),
this.selectMenuClassname = config.selectMenuClassname || "",
this.eventType = config.eventType || "click",
this.autoPlay = config.autoPlay || false,
this.stayTime = config.stayTime || 5000,
this.callback = config.callback || null,
this.currentIndex = 0;
this._init();
}
Tab.prototype = {
_init : function(){
this._bindEvent();
this._autoPlay();
},
_bindEvent : function(){
var This = this;
for(var i = 0,n=This.menus.length;i<n;i++){
(function(n){
This.menus[n]["on"+This.eventType] = function(){
This.showItem(n);
}
})(i);
}
},
_autoPlay : function(){
if(!this.autoPlay) return;
var This = this;
setInterval(function(){
itemsCount = This.menus.length;
This.currentIndex = This.currentIndex >= itemsCount - 1 ? 0 : This.currentIndex+1 ;
This.showItem(This.currentIndex);
},This.stayTime);
},
showItem : function(index){
this._showContent(index);
if(this.selectMenuClassname){
this._focusMenu(index);
}
if(this.callback){
this.callback(index);
}
},
_showContent : function(index){
this.currentIndex = index;
for(var i=0,n=this.contents.length;i<n;i++){
if(i==index){
this.contents[i].style.display = "block";
} else {
this.contents[i].style.display = "none";
}
}
},
_focusMenu : function(index){
var menuFocused = getElementsByClassName(this.selectMenuClassname,this.root)[0];
menuFocused.className = menuFocused.className.split(this.selectMenuClassname).join(" ");
this.menus[index].className += " " + this.selectMenuClassname;
}
}
var tab1 = new Tab({root:"demo9-1",selectMenuClassname:"demo91-tabMenu-selected",autoPlay:true,stayTime:8000});
new Tab({root:"demo9-2",selectMenuClassname:"demo92-tabMenu-selected",eventType:"mouseover",callback:function(index){alert("您激活了第"+(index+1)+"个tab项");}}); document.getElementById("btn").onclick = function(){
tab1.showItem(2);
}
})();
</script>
<!-- 版本9结束 -->
</body>
</html>