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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
| <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>面向对象-选项卡组件</title>
<style type="text/css">
*{ list-style: none;padding: 0;margin: 0}
body { font-family: verdana,arial,sans-serif,"宋体"; font-size: 12px;}
#tab1,#tab2,#tab3{ width: 600px;height: auto;padding:10px;}
.tab-tb{ border-bottom: 1px solid #d55e12; font-size: 0.9em; margin: 0 0 20px; padding: 0 30px 2px 0; text-align: right;}
.tab-tb li{ display: inline;}
.tab-tb li a{ color: #ea8544;text-decoration: none;padding: 2px 5px 4px}
.tab-tb li a:hover{ text-decoration: none;color:#d55e12;}
.tab-tb li.active a{ border-width: 1px;border-style: solid;border-color:#d55e12 #d55e12 #ffffff;color:#d55e12;font-weight: bold;padding: 2px 10px;background: white}
.tab-td{ border-bottom: 1px solid #d55e12;padding-bottom: 10px}
.tab-td li{ display: none}
.tab-td li:nth-of-type(1){ display: block;}
</style>
<script>
function getByClass(obj, sclass) {
var allEle = obj.getElementsByTagName('*');
var aResult = [];
var re = new RegExp('\\b' + sclass + '\\b'); // \\b正则表达式单词边界
for(var i = 0; i < allEle.length; i++) {
if(re.test(allEle[i].className)) {
aResult.push(allEle[i]);
}
}
return aResult;
}
window.onload = function() {
var tab1 = new TabList('tab1');
tab1.hover();
var tab2 = new TabList('tab2');
tab2.click();
var tab3 = new TabList('tab3');
tab3.click();
tab3.autoPlay(2000);
}
function TabList(id) {
this.tab = document.getElementById(id);
this.tabTb = getByClass(this.tab,'tab-tb')[0];
this.tabTbLi = this.tabTb.getElementsByTagName('li');
this.tabTd = getByClass(this.tab,'tab-td')[0];
this.tabTdLi = this.tabTd.getElementsByTagName('li');
this.iNow = 0;
}
TabList.prototype.hover = function() {
var _this = this;
for(var i = 0; i < this.tabTbLi.length; i++) {
this.tabTbLiA = this.tabTbLi[i].getElementsByTagName('a')[0];
this.tabTbLi[i].index = i;
this.tabTbLiA.onmouseover = function() {
_this.tabShow(this);
_this.iNow = this.parentNode.index;
}
}
}
TabList.prototype.click = function() {
var _this = this;
for(var i = 0; i < this.tabTbLi.length; i++) {
this.tabTbLiA = this.tabTbLi[i].getElementsByTagName('a')[0];
this.tabTbLi[i].index = i;
this.tabTbLiA.onclick = function() {
_this.tabShow(this);
_this.iNow = this.parentNode.index;
}
}
}
TabList.prototype.tabShow = function(obj) {
for(var i = 0; i < this.tabTbLi.length; i++) {
this.tabTbLi[i].className=';
this.tabTdLi[i].style.display = 'none';
}
obj.index = obj.parentNode.index;
obj.parentNode.className = 'active';
this.tabTdLi[obj.index].style.display = 'block';
}
TabList.prototype.autoPlay = function(time) {
var _this = this;
this.autofn(time);
this.tabTd.onmouseover = function() {
clearInterval(_this.timer);
}
this.tabTd.onmouseout = function() {
_this.autofn();
}
}
TabList.prototype.autofn = function(time) {
var _this = this;
time = time || 3000;
_this.timer = setInterval(function() {
if( _this.iNow === _this.tabTbLi.length - 1) {
_this.iNow = 0;
} else {
_this.iNow++;
}
for(var i = 0; i < _this.tabTbLi.length; i++) {
_this.tabTbLi[i].className = ';
_this.tabTdLi[i].style.display = 'none';
}
_this.tabTbLi[_this.iNow].className = 'active';
_this.tabTdLi[_this.iNow].style.display = 'block';
},time);
}
</script>
<body>
<div id="tab1">
<ul class="tab-tb">
<li class="active">
<a href="javascript:;">PHP/MySQL</a>
</li>
<li>
<a href="javascript:;">(X)HTML/CSS</a>
</li>
<li>
<a href="javascript:;">Javascript</a>
</li>
<li>
<a href="javascript:;">Ajax</a>
</li>
</ul>
<ul class="tab-td">
<li>
PHP
PHP（"PHP: Hypertext Preprocessor"，超文本预处理器的字母缩写）是一种被广泛应用的开放源代码的多用途脚本语言，它可嵌入到 HTML中，尤其适合 web 开发。
MySQL
MySQL是最流行的开放源码SQL数据库管理系统，它是由MySQL AB公司开发、发布并支持的。MySQL AB是由多名MySQL开发人创办的一家商业公司。它是一家第二代开放源码公司，结合了开放源码价值取向、方法和成功
</li>
<li>
(X)HTML
HTML语言是我们建立网页的工具，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上日新月异的应用需求。2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。
XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。
CSS
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
</li>
<li>
Javascript
JavaScript 是一种新的描述语言，此一语言可以被嵌入 HTML 的文件之中。透过 JavaScript 可以做到回应使用者的需求事件 (如： form 的输入) 而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。
</li>
<li>
Ajax
AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词，但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略，在 Gmail、Google suggest 及 Google Maps 出现后才一举成名天下知。
这两个 JavaScript 功能 是：
在不重新读取页面的情况下对伺服器送出要求（request）
解析、使用 XML 文件
</li>
</ul>
</div>
<div id="tab2">
<ul class="tab-tb">
<li class="active">
<a href="javascript:;">PHP/MySQL</a>
</li>
<li>
<a href="javascript:;">(X)HTML/CSS</a>
</li>
<li>
<a href="javascript:;">Javascript</a>
</li>
<li>
<a href="javascript:;">Ajax</a>
</li>
</ul>
<ul class="tab-td">
<li>
PHP
PHP（"PHP: Hypertext Preprocessor"，超文本预处理器的字母缩写）是一种被广泛应用的开放源代码的多用途脚本语言，它可嵌入到 HTML中，尤其适合 web 开发。
MySQL
MySQL是最流行的开放源码SQL数据库管理系统，它是由MySQL AB公司开发、发布并支持的。MySQL AB是由多名MySQL开发人创办的一家商业公司。它是一家第二代开放源码公司，结合了开放源码价值取向、方法和成功
</li>
<li>
(X)HTML
HTML语言是我们建立网页的工具，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上日新月异的应用需求。2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。
XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。
CSS
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
</li>
<li>
Javascript
JavaScript 是一种新的描述语言，此一语言可以被嵌入 HTML 的文件之中。透过 JavaScript 可以做到回应使用者的需求事件 (如： form 的输入) 而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。
</li>
<li>
Ajax
AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词，但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略，在 Gmail、Google suggest 及 Google Maps 出现后才一举成名天下知。
这两个 JavaScript 功能 是：
在不重新读取页面的情况下对伺服器送出要求（request）
解析、使用 XML 文件
</li>
</ul>
</div>
<div id="tab3">
<ul class="tab-tb">
<li class="active">
<a href="javascript:;">PHP/MySQL</a>
</li>
<li>
<a href="javascript:;">(X)HTML/CSS</a>
</li>
<li>
<a href="javascript:;">Javascript</a>
</li>
<li>
<a href="javascript:;">Ajax</a>
</li>
</ul>
<ul class="tab-td">
<li>
PHP
PHP（"PHP: Hypertext Preprocessor"，超文本预处理器的字母缩写）是一种被广泛应用的开放源代码的多用途脚本语言，它可嵌入到 HTML中，尤其适合 web 开发。
MySQL
MySQL是最流行的开放源码SQL数据库管理系统，它是由MySQL AB公司开发、发布并支持的。MySQL AB是由多名MySQL开发人创办的一家商业公司。它是一家第二代开放源码公司，结合了开放源码价值取向、方法和成功
</li>
<li>
(X)HTML
HTML语言是我们建立网页的工具，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上日新月异的应用需求。2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。
XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。
CSS
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
</li>
<li>
Javascript
JavaScript 是一种新的描述语言，此一语言可以被嵌入 HTML 的文件之中。透过 JavaScript 可以做到回应使用者的需求事件 (如： form 的输入) 而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。
</li>
<li>
Ajax
AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词，但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略，在 Gmail、Google suggest 及 Google Maps 出现后才一举成名天下知。
这两个 JavaScript 功能 是：
在不重新读取页面的情况下对伺服器送出要求（request）
解析、使用 XML 文件
</li>
</ul>
</div>
</body>
</html>
|