一通過(guò)事件代理監(jiān)聽(tīng)
<!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">選項(xiàng)一</li>
<li>選項(xiàng)二</li>
<li>選項(xiàng)三</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");
//冒泡，事件代理監(jiān)聽(tīng)
tableHead.addEventListener("click",function(e){
var nodeclick=e.target;
var headLis=tableHead.children;
var boxLis=tableBox.children;
//判斷點(diǎn)擊的對(duì)象是不是li禽最，因?yàn)槭录O(jiān)聽(tīng)是綁定到ul上的
if(nodeclick.tagName.toLowerCase()==="li"){
//清除掉所有按鈕active樣式
Array.prototype.forEach.call(headLis,function(e){
e.classList.remove("active");
})
//為單擊的目標(biāo)按鈕添加active樣式
nodeclick.classList.add("active");
//查詢獲取有active樣式的按鈕在數(shù)組中的下標(biāo)值陨簇，保存到index中
var index=[].indexOf.call(headLis,$(".active"));
//循環(huán)遍歷先刪除每個(gè)box的添加樣式active
Array.prototype.forEach.call(boxLis,function(e){
e.classList.remove("active");
})
//為對(duì)應(yīng)下標(biāo)的box添加active樣式類外邓，使對(duì)應(yīng)box顯示出來(lái)
boxLis[index].classList.add("active");
}
})
function $(str){
return document.querySelector(str);
};
</script>
</body>
</html>
效果
二袋马，通過(guò)綁定監(jiān)聽(tīng)事件
<!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">選項(xiàng)一</li>
<li>選項(xiàng)二</li>
<li>選項(xiàng)三</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){
//循環(huán)遍歷刪除按鈕li的樣式
Array.prototype.forEach.call(liHead,function(e){
e.classList.remove("active");
})
//為當(dāng)前點(diǎn)擊的按鈕添加樣式
e.target.classList.add("active");
//循環(huán)遍歷刪除顯示框
Array.prototype.forEach.call(liBox,function(e){
e.classList.remove("active");
})
//循環(huán)遍歷戳护，保存被點(diǎn)擊按鈕的序號(hào)非凌，顯示出對(duì)應(yīng)序號(hào)的顯示框
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>
效果
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
