一通过事件代理监听
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.clearfix:after{
content: " ";
display: block;
clear: both;
}
.table{
padding: 20px 20px;
margin: 20px auto;
width:600px;
border: 1px solid #ccc;
border-radius: 4px;
}
.table .table-head{
border-bottom: 1px solid #ccc;
}
.table .table-head>li{
float: left;
padding: 10px 20px;
border-top:1px solid #FFFFFF ;
border-left:1px solid #FFFFFF ;
border-right:1px solid #FFFFFF ;
cursor: pointer;
color: brown;
}
.table .table-head .active{
margin-bottom: -1px;
border-color: #ccc;
border-bottom: 1px solid #FFFFFF;
border-radius: 4px 4px 0 0;
color: #333;
}
.table .table-box li{
display: none;
padding: 30px 20px;
height: 200px;
}
.table .table-box .active{
display: block;
}
</style>
</head>
<body>
<div class="table">
<ul class="table-head clearfix">
<li class="active">选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<ul class="table-box">
<li class="active">111111111</li>
<li>222222222</li>
<li>333333333</li>
</ul>
</div>
<script>
var tableHead=$(".table-head");
var tableBox=$(".table-box");
//冒泡，事件代理监听
tableHead.addEventListener("click",function(e){
var nodeclick=e.target;
var headLis=tableHead.children;
var boxLis=tableBox.children;
//判断点击的对象是不是li，因为事件监听是绑定到ul上的
if(nodeclick.tagName.toLowerCase()==="li"){
//清除掉所有按钮active样式
Array.prototype.forEach.call(headLis,function(e){
e.classList.remove("active");
})
//为单击的目标按钮添加active样式
nodeclick.classList.add("active");
//查询获取有active样式的按钮在数组中的下标值，保存到index中
var index=[].indexOf.call(headLis,$(".active"));
//循环遍历先删除每个box的添加样式active
Array.prototype.forEach.call(boxLis,function(e){
e.classList.remove("active");
})
//为对应下标的box添加active样式类，使对应box显示出来
boxLis[index].classList.add("active");
}
})
function $(str){
return document.querySelector(str);
};
</script>
</body>
</html>
效果
二，通过绑定监听事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
ul,li{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.clearfix:after{
content: " ";
display: block;
clear: both;
}
.table{
padding: 20px 20px;
margin: 20px auto;
width:600px;
border: 1px solid #ccc;
border-radius: 4px;
}
.table .table-head{
border-bottom: 1px solid #ccc;
}
.table .table-head>li{
float: left;
padding: 10px 20px;
cursor: pointer;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
color: brown;
}
.table .table-head .active{
margin-bottom: -1px;
border: 1px solid #ccc;
border-bottom-color: #FFFFFF;
border-radius: 4px 4px 0 0;
color: #333;
}
.table .table-box li{
display: none;
padding: 30px 20px;
height: 200px;
}
.table .table-box .active{
display: block;
}
</style>
</head>
<body>
<div class="table">
<ul class="table-head clearfix">
<li class="active">选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<ul class="table-box">
<li class="active">111111111</li>
<li>222222222</li>
<li>333333333</li>
</ul>
</div>
<script>
var tableHead=$(".table-head");
var tableBox=$(".table-box");
var liHead=tableHead.getElementsByTagName("li");
var liBox=tableBox.getElementsByTagName("li");
var index;
for (var i=0;i<liHead.length;i++) {
addEvent(liHead[i],"click",function(e){
//循环遍历删除按钮li的样式
Array.prototype.forEach.call(liHead,function(e){
e.classList.remove("active");
})
//为当前点击的按钮添加样式
e.target.classList.add("active");
//循环遍历删除显示框
Array.prototype.forEach.call(liBox,function(e){
e.classList.remove("active");
})
//循环遍历，保存被点击按钮的序号，显示出对应序号的显示框
for (var j=0;j<liHead.length;j++) {
if(liHead[j]===$(".active")){
liBox[j].classList.add("active");
}
}
});
}
function $(str){
return document.querySelector(str);
}
function addEvent(node,type,handler){
if(!node) return false;
if(node.addEventListener){
node.addEventListener(type,handler,false);
return true;
}
if(node.attachEvent){
node.attachEvent('on'+type,handler);
return true;
}
return false;
}
</script>
</body>
</html>
效果
