怎么写Tab?基于JavaScript实现的

跟着阿当一步一步的学习怎么写tab,基于JavaScript实现的。

原文作者:阿当

原文链接地址:怎么写tab?

阿当的书:编写高质量代码——web前端开发修炼之道

演示地址: http://www.adanghome.com/js_demo/3/

一个getElementsByClassName 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var 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;
}

版本一

The CSS Code:

1
#t1_m1,#t1_m2,#t1_m3{padding:5px;border:dashed 1px #333;margin:0 5px;}

The HTML Code:

1
2
3
4
5
6
7
8
<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>

The JavaScript Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
	(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";
		}
	})();

版本二

The CSS Code :

#t2_m1,#t2_m2,#t2_m3{padding:5px;border:dashed 1px #333;margin:0 5px;}
#t2_c2,#t2_c3{display:none;}

The HTML Code :

1
2
3
4
5
6
7
8
9
10
11
12
<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>

The JavaScript Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
	(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";
		}
	})();

版本三

The CSS Code :

1
#tab_menu span{padding:5px;border:dashed 1px #333;margin:0 5px;}

The HTML Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

The JavaScript Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
	(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";
				}
			}
		}
	})();

版本四

The CSS Code :

1
2
#demo4-1 ul{padding:0;margin:0}
.demo41_tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}

The HTML Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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 name="sex" id="male" class="demo42_tabMenu" checked="checked" type="radio"> <label for="male"></label>
	<input name="sex" id="female" class="demo42_tabMenu" type="radio"> <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>

The JavaScript Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
	(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";
				}
			}
		}
	})();

版本五

The CSS Code :

1
2
#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;}

The HTML Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>

The JavaScript Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
	(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");
	})();

版本六

The CSS Code :

1
2
3
4
#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;}

The HTML Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>

The JavaScript Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
	(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");
	})();

版本七

The CSS Code :

1
2
3
4
#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;}

The HTML Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="demo7-1">
<ul>
	<li class="tabMenu  ">menu1</li>
	<li class="tabMenu demo71-tabMenu-selected">menu2</li>
	<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
	<div style="display: none;" class="tabContent">11111<div>一一一一一一一</div></div>
	<div style="display: block;" class="tabContent none">22222<div>二二二</div></div>
	<div style="display: none;" 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>

The JavaScript Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
	(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项");});
	})();

版本八

The CSS Code :

1
2
3
4
#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;}

The HTML Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="demo8-1">
<ul>
	<li class="tabMenu  ">menu1</li>
	<li class="tabMenu demo81-tabMenu-selected">menu2</li>
	<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
	<div style="display: none;" class="tabContent">11111<div>一一一一一一一</div></div>
	<div style="display: block;" class="tabContent none">22222<div>二二二</div></div>
	<div style="display: none;" 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>

The JavaScript Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
	(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项");}});
	})();

版本九

The CSS Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
	(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项");}});
	})();

The HTML Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="demo9-1">
<ul>
	<li class="tabMenu  ">menu1</li>
	<li class="tabMenu demo91-tabMenu-selected">menu2</li>
	<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
	<div style="display: none;" class="tabContent">11111<div>一一一一一一一</div></div>
	<div style="display: block;" class="tabContent none">22222<div>二二二</div></div>
	<div style="display: none;" class="tabContent none">33333</div>
</div>
</div>
<p><input value="激活第3个tab" id="btn" type="button"></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>

The JavaScript Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
	(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);
		}
	})();

演示地址: http://www.adanghome.com/js_demo/3/

站点统计