0001dome-使用事件委托实现点击按钮显示相应内容

最新推荐文章于 2019-09-11 17:25:00 发布

纯黑色山羊

最新推荐文章于 2019-09-11 17:25:00 发布

阅读量634

点赞数 1

分类专栏： javascript 文章标签： dome

本文链接：https://blog.csdn.net/weixin_39876270/article/details/80364017

版权

javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!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>