dome"/>
0001dome
<!DOCTYPE html>
<html>
<head>
<title>事件代理Ddome</title>
</head>
<style type="text/css">
/*略微美化一下*/
html,body,div,ul,li{
margin:0;
padding:0;
text-align: center;
}
li{
list-style: none;
}
.muneList{
overflow: hidden;
background:black;
}
.muneList .mune_item{
background:orange;
float:left;
width:33%;
line-height:30px;
margin-left:0.5%;
}
.muneList .mune_item:first-child{
margin:0;
}
.list{
padding:10px;
line-height:100px;
background:yellow;
}
.box{
display:none;
}
.show{
display: block;
}
</style>
<body>
<div class="root_box">
<ul class="muneList" id = 'mune_list'>
<li class="mune_item" data-mune = "centent_0">A</li>
<li class="mune_item" data-mune = "centent_1">B</li>
<li class="mune_item" data-mune = "centent_2">C</li>
</ul>
<div class = 'list' id = 'centent_box'>
<div class="box centent_0 show">这是内容一</div>
<div class="box centent_1">这是内容二</div>
<div class="box centent_2">这是内容三</div>
</div>
</div>
<script type="text/javascript">
var root_box = {
// 获取事件对象的父元素
mune_list : document.getElementById("mune_list"),
// 获取需要显示对象的父元素
center_box : document.getElementById("centent_box"),
// 事件绑定
event_bind : function(){
let self = this;
this.mune_list.addEventListener('click',function(event){
if(event.target.parentNode.id == "mune_list"){
// 将需要的索引数据放入相应的事件处理程序中处理
self.fliter_show(event.target.getAttribute("data-mune"));
}
},false);
},
// 根据获取到事件对象的数据进行操作
//这里使用类名进行筛选
fliter_show : function(idx){
this.center_box.querySelector('.show').classList.remove('show');
this.center_box.querySelector('.'+idx).classList.add('show');
}
}
root_box.event_bind();
</script>
</body>
</html>
更多推荐
0001dome
发布评论