Skip to content

Commit 87cadcb

Browse files
dunizbdunizb
committed
OOP方式编写选项卡效果
1 parent e88ef05 commit 87cadcb

6 files changed

Lines changed: 122 additions & 0 deletions

File tree

‎JS面向对象/OOP方式编写选项卡效果.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>OOP方式编写选项卡效果|Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!</title>
6+
<meta name="Keyword" content="代码演示,代码片段,HTML5,CSS3,JavaScript,jQuery,Bootstrap,Angular">
7+
<meta name="Author" content="dunizb">
8+
<meta name="website" content="http://www.dunizb.com">
9+
<meta name="Description" content="Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!">
10+
<style>
11+
#tab div img,
12+
#tab1 div img {
13+
width: 300px;
14+
height: 200px;
15+
}
16+
17+
#tab div,
18+
#tab1 div {
19+
display: none;
20+
}
21+
</style>
22+
<script type="text/javascript" src="js/tab.js"></script>
23+
<script type="text/javascript">
24+
window.onload = function() {
25+
var tab = new Tab('tab');
26+
tab.init();
27+
tab.autoPlay();
28+
29+
var tab1 = new Tab('tab1');
30+
tab1.init();
31+
// tab1.autoPlay();
32+
33+
}
34+
</script>
35+
</head>
36+
<body>
37+
<div id="tab">
38+
<input type="button" value="苹果">
39+
<input type="button" value="香蕉">
40+
<input type="button" value="橘子">
41+
<div><img src="img/apple.jpg"></div>
42+
<div><img src="img/banana.jpg"></div>
43+
<div><img src="img/orange.jpg"></div>
44+
</div>
45+
46+
<div id="tab1">
47+
<input type="button" value="苹果">
48+
<input type="button" value="香蕉">
49+
<input type="button" value="橘子">
50+
<div><img src="img/apple.jpg"></div>
51+
<div><img src="img/banana.jpg"></div>
52+
<div><img src="img/orange.jpg"></div>
53+
</div>
54+
</body>
55+
</html>

‎JS面向对象/img/apple.jpg‎

167 KB
Loading

‎JS面向对象/img/banana.jpg‎

189 KB
Loading

‎JS面向对象/img/orange.jpg‎

185 KB
Loading

‎JS面向对象/js/tab.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
function Tab(id) {
2+
this.tab = document.getElementById(id);
3+
this.aInput = this.tab.getElementsByTagName('input');
4+
this.aDiv = this.tab.getElementsByTagName('div');
5+
this.nowIndex = 0;
6+
}
7+
8+
Tab.prototype.init = function() {
9+
this.aInput[0].style.backgroundColor = 'orange';
10+
this.aDiv[0].style.display = 'block';
11+
var that = this;
12+
for (var i = 0; i < this.aInput.length; i++) {
13+
this.aInput[i].index = i;
14+
this.aInput[i].onclick = function() {
15+
// 切换功能
16+
// 这里的this是当前点击的input
17+
that.change(this);
18+
}
19+
}
20+
// this.autoPlay();
21+
}
22+
23+
Tab.prototype.change = function(obj) {
24+
// 这里的this是实例对象
25+
for (var i = 0; i < this.aInput.length; i++) {
26+
this.aInput[i].style.backgroundColor = '';
27+
this.aDiv[i].style.display = 'none';
28+
}
29+
obj.style.backgroundColor = 'orange';
30+
this.aDiv[obj.index].style.display = 'block';
31+
}
32+
33+
Tab.prototype.autoPlay = function(){
34+
// 这里的this是实例对象
35+
var that = this;
36+
setInterval(function(){
37+
// 自动切换功能
38+
// 这里的this是window
39+
// nowIndex 变化范围：0 1 2
40+
if(that.nowIndex === that.aInput.length - 1){
41+
// 如果当前循环的切换到最后一个，那么就从头开始
42+
that.nowIndex = 0;
43+
}else{
44+
that.nowIndex++;
45+
}
46+
var nowInput = that.aInput[that.nowIndex];
47+
that.change(nowInput);
48+
},1000);
49+
}

‎JavaScript/bom操作练习/获取URL的各个部分.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>获取URL的各个部分|Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!</title>
6+
<meta name="Keyword" content="代码演示,代码片段,HTML5,CSS3,JavaScript,jQuery,Bootstrap,Angular">
7+
<meta name="Author" content="dunizb">
8+
<meta name="website" content="http://www.dunizb.com">
9+
<meta name="Description" content="Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!">
10+
</head>
11+
<body>
12+
13+
14+
<script type="text/javascript">
15+
16+
</script>
17+
</body>
18+
</html>

0 commit comments

Comments
 (0)