面向对象选项卡（回头写个简单的小案例）

发表于 | 更新于

面向对象的理解：
面向对象（oop）是一种编程的思想，它的优点便于管理，代码可维护性好；方便继承；适合封装，重功能，不重过程。

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset='UTF-8'>
		<title></title>
		<style type='text/css'>
			*{margin:0;padding:0;}
			.container{font-size:40px;}
			.container span.active{color:#f0f;}
			.container div{width:200px;height:200px;background:#f00;display:none;}
			.container div.active{display:block;}
		</style>
	</head>
	<body>
		<div class='container' id='container'>
			<p>
				<span class='active'>1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
				<span>5</span>
			</p>
			<div class='active'>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
		</div>
	</body>
	<script type='text/javascript'>
		new TabSwitch('container');
		
		function TabSwitch(odiv){
			var that = this;
			
			this.container = document.getElementById(odiv);
			this.tabs = this.container.getElementsByTagName('span');
			this.views = this.container.getElementsByTagName('div');
			
			for(var i = 0;i < this.tabs.length;i++){
				this.tabs[i].index = i;
				this.tabs[i].onclick = function(){
					that.fnClick(that,this)
				};
			}
		}
		
		TabSwitch.prototype.fnClick = function(that,_this){
			var _len = that.tabs.length;
			for(var i = 0;i < _len;i++){
				
				that.tabs[i].removeAttribute('class');
				that.views[i].removeAttribute('class')
			}
			_this.className = 'active';
			that.views[_this.index].className = 'active';
			console.log(_this.index)
		}
	</script>
</html>