效果如图所示：
ES5：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
width: 670px;
margin: 0;
padding: 0;
}
.box {
width: 670px;
height: 400px;
border: 1px solid black;
clear: both;
display: none;
}
ul {
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 50px;
line-height: 50px;
margin-left: 5px;
border: 1px solid #ddd;
text-align: center;
cursor: pointer;
}
.color {
background-color: brown;
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li class="color">第一页</li>
<li>第二页</li>
<li>第三页</li>
</ul>
<div class="box" style="display: block;">第一模块</div>
<div class="box">第二模块</div>
<div class="box">第三模块</div>
</div>
<script>
var lis = document.querySelectorAll('li');
var div = document.querySelector('#container').querySelectorAll('div')
console.log(div);
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i)
lis[i].onclick = function () {
for (var i = 0; i < lis.length; i++) {
lis[i].className = ''
}
this.className = 'color'
var index = this.getAttribute('index');
for (var i = 0; i < div.length; i++) {
div[i].style.display = 'none'
}
div[index].style.display = 'block'
}
}
</script>
</body>
</html>ES6写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向对象-选项卡</title>
<style>
#container {
width: 670px;
margin: 0;
padding: 0;
}
.box {
width: 670px;
height: 400px;
border: 1px solid black;
clear: both;
display: none;
}
ul {
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 50px;
line-height: 50px;
margin-left: 5px;
border: 1px solid #ddd;
text-align: center;
cursor: pointer;
}
.box{
display: none;
}
.color {
background-color: brown;
color: #fff;
}
</style>
</head>
<body>
<div id="div2">
<ul>
<li class="color">第一页</li>
<li>第二页</li>
<li>第三页</li>
</ul>
</div>
<div class="box" style="display:block;">第一模块</div>
<div class="box">第二模块</div>
<div class="box">第三模块</div>
</body>
</html>
<script type="text/javascript">
window.onload = function () {
var oTab = new Tab("div2");
}
var lis = null;
var div = null;
function Tab(id){
var div2 = document.getElementById(id);
this.lis = div2.getElementsByTagName('li');//全局变量 转变成属性
this.div = document.getElementsByClassName('box');
var _this =this;//将这里的对象this存入_this中，方便在列表点击里面用
for(i=0;i<this.lis.length;i++){
this.lis[i].index = i;
this.lis[i].onclick = function () {
_this.tab(this);//这里的this指的是列表，把它作为参数传到函数中；
}
}
}
Tab.prototype.tab = function (lis){//函数 转变成对象的方法
// alert(this); //这里的this指的是对象object;
for(i=0;i<this.lis.length;i++){
this.lis[i].className = '';
this.div[i].style.display = 'none';
}
lis.className = 'color';
this.div[lis.index].style.display = 'block';
}
</script>