<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ES5面向对象选项卡</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.tabMenu {
width: 300px;
margin: 40px auto 0;
}
.tabMenu ul {
display: block;
overflow: hidden;
width: 300px;
height: 40px;
background: #eee;
}
.tabMenu ul li {
cursor: pointer;
display: block;
float: left;
width: 100px;
text-align: center;
height: 40px;
line-height: 40px;
font-size: 16px;
}
.tabMenu ul li.active {
background: #f00;
color: #fff;
}
.tabMenu .tabSide {
display: none;
padding: 10px;
line-height: 20px;
white-space: pre-wrap;
word-break: break-all;
width: 278px;
border: solid 1px #eee;
}
.tabMenu div.active {
display: block;
padding: 10px;
line-height: 20px;
white-space: pre-wrap;
word-break: break-all;
width: 278px;
border: solid 1px #eee;
}
</style>
</head>
<body>
<div id="tabMain" class="tabMenu">
<ul>
<li class="active">选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<div class="tabSide active">合肥</div>
<div class="tabSide">南京</div>
<div class="tabSide">上海</div>
</div>
</body>
<script type="text/javascript">
window.onload =function() {
var main = document.getElementById("tabMain");
var tab = new Tab(main);
tab.init();
}
function Tab(id) {
this.aLi = id.getElementsByTagName("li");
this.oDiv = id.getElementsByTagName("div");
}
Tab.prototype.init = function() {
var obj = this;
for (var index = 0; index < obj.aLi.length; index++) {
obj.aLi[index].index = index;
obj.aLi[index].onclick = function() {
obj.fnClick(this);
}
}
}
Tab.prototype.fnClick = function(aLi) {
for (var index = 0; index < this.aLi.length; index++) {
this.aLi[index].className = "";
this.oDiv[index].style.display = "none";
}
aLi.className = "active";
this.oDiv[aLi.index].style.display = "block";
};
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ES6面向对象选项卡</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.tabMenu {
width: 300px;
margin: 40px auto 0;
}
.tabMenu ul {
display: block;
overflow: hidden;
width: 300px;
height: 40px;
background: #eee;
}
.tabMenu ul li {
cursor: pointer;
display: block;
float: left;
width: 100px;
text-align: center;
height: 40px;
line-height: 40px;
font-size: 16px;
}
.tabMenu ul li.active {
background: #f00;
color: #fff;
}
.tabMenu .tabSide {
display: none;
padding: 10px;
line-height: 20px;
white-space: pre-wrap;
word-break: break-all;
width: 278px;
border: solid 1px #eee;
}
.tabMenu div.active {
display: block;
padding: 10px;
line-height: 20px;
white-space: pre-wrap;
word-break: break-all;
width: 278px;
border: solid 1px #eee;
}
</style>
</head>
<body>
<div id="tabMain" class="tabMenu">
<ul>
<li class="active">选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<div class="tabSide active">合肥</div>
<div class="tabSide">南京</div>
<div class="tabSide">上海</div>
</div>
<script>
class star {
constructor(id) {
this.all = document.getElementById(id);
this.allLi = this.all.getElementsByTagName('li');
this.allDiv = this.all.getElementsByTagName('div');
this.init();
}
init() {
for (let i = 0; i < this.allLi.length; i++) {
this.allLi[i].onclick = function() {
this.hide();
this.show(i);
}.bind(this);
}
}
show(index) {
this.allLi[index].className = 'active';
this.allDiv[index].style.display = 'block';
}
hide() {
for (let i = 0; i < this.allLi.length; i++) {
this.allLi[i].className = '';
}
for (let j = 0; j < this.allDiv.length; j++) {
this.allDiv[j].style.display = 'none';
}
}
}
new star('tabMain');
</script>
</body>
</html>