事件的应用
2017-08-04 本文已影响0人
谨言_慎行
1. 实现如下图Tab切换的功能
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.tab-ct{
width: 304px;
margin: auto;
}
.tab-ct li{
border: 1px solid;
}
.header > li{
list-style: none;
border: 1px solid;
border-left: none;
border-bottom: none;
}
.header > li:hover{
cursor: pointer;
}
.header > li:first-child{
border-left: 1px solid;
}
.clear:after{
content: '';
display: block;
clear: both;
}
.header>li{
float: left;
width: 100px;
}
.content>li{
float: left;
width: 302px;
height: 200px;
display: none;
}
.header .active {
background-color: rgba(128, 128, 128, 0.2);
}
.content .active{
display: block;
}
</style>
</head>
<body>
<div class="tab-ct">
<ul class="header clear">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<ul class="content clear">
<li class="active">ct1</li>
<li>ct2</li>
<li>ct3</li>
</ul>
</div>
<script>
var tabs = document.querySelectorAll('.tab-ct .header>li') // 声明
var panels = document.querySelectorAll('.tab-ct .content>li') // 声明
tabs.forEach(function(tab){ // 遍历
tab.addEventListener('click',function(){ // 触发事件
tabs.forEach(function(node){ // 遍历
node.classList.remove('active') // 去除所有class='active'
})
this.classList.add('active') // 鼠标点击的加class='active'
var index = [].indexOf.call(tabs,this) //i
panels.forEach(function(node){
node.classList.remove('active')
})
panels[index].classList.add('active')
})
})
</script>
</body>
</html>
预览- http://js.jirengu.com/taboh/3/edit?output
2.实现下图的模态框功能，点击模态框不隐藏，点击关闭以及模态框以外的区域模态框隐藏
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.modal{
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
}
.active{
display: block;
}
.modal-ct {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
background-color:white;
border-radius: 3px;
}
.modal-ct .content{
border-top: 1px solid;
border-bottom: 1px solid;
padding: 20px 10px;
}
.modal-ct header{
margin-top: 10px;
margin-bottom: 10px;
padding-left: 10px;
}
.modal-ct header span{
margin-left: 290px;
}
.modal-ct footer {
margin: 10px;
margin-left: 300px;
}
.modal-ct footer span{
padding-left: 10px;
}
.modal-ct span {
cursor: pointer;
}
</style>
</head>
<body>
<div class="btn-group">
<button id="btn">点我</button>
</div>
<div class="modal">
<div class="modal-ct">
<header>
<h3>这是标题<span class="close">X</span></h3>
</header>
<div class="content">
<p>这是内容</p>
<p>这是内容</p>
</div>
<footer>
<span class="cancel">取消</span><span>确定</span>
</footer>
</div>
</div>
<script>
var btn = document.querySelector('#btn')
madal = document.querySelector('.modal')
ct = document.querySelector('.modal-ct')
close = document.querySelector('.close')
cancel = document.querySelector('.cancel')
btn.addEventListener('click',function(){
madal.classList.add('active')
})
close.addEventListener('click',function(){
madal.classList.remove('active')
})
cancel.addEventListener('click',function(){
madal.classList.remove('active')
})
madal.addEventListener('click',function(){
madal.classList.remove('active')
})
ct.addEventListener('click',function(e){
e.stopPropagation()
})
</script>
</body>
</html>
