Web25.事件的应用
2017-10-18 本文已影响1人
FiredEarthMusic
题目1
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
* {
box-sizing: border-box;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.tab-ct .header:after{
content: '';
display: block;
clear: both;
}
.tab-ct .header>li{
width: 60px;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
border-right: none;
float: left;
text-align: center;
}
.tab-ct .header>li.active{
background: #ccc;
}
.tab-ct .header>li:last-child{
border-right: 1px solid #ccc;
}
.tab-ct .content>li{
width: 180px;
height: 100px;
border: 1px solid #ccc;
border-top: none;
padding: 10px;
display: none;
}
.tab-ct .content>li.active{
display: block;
}
</style>
</head>
<body>
<div class="tab-ct">
<ul class="header">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<ul class="content">
<li class="active">wo</li>
<li>yyz</li>
<li>daqian</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')
})
this.classList.add('active')
var index = [].indexOf.call(tabs, this)
panels.forEach(function(node){
node.classList.remove('active')
})
panels[index].classList.add('active')
})
})
</script>
</body>
</html>
题目2
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="modal模态框">
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.modal-dialog {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.8);
}
.modal-dialog .bt{
display: inline-block;
padding: 3px 6px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 14px;
}
.modal-dialog a{
text-decoration: none;
color: #333;
}
.modal-dialog .cover{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.4;
z-index: 99;
}
.modal-dialog .modal-ct{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 400px;
border-radius: 3px;
border: 1px solid #ccc;
background: #fff;
z-index: 100;
}
.modal-dialog .modal-ct .header{
position: relative;
height: 36px;
line-height: 36px;
border-bottom: 1px solid #ccc;
}
.modal-dialog .modal-ct .header h3 {
margin: 0;
padding-left: 10px;
font-size: 16px;
}
.modal-dialog .modal-ct .header .close{
position: absolute;
right: 10px;
top: 10px;
line-height: 1;
}
.modal-dialog .modal-ct .content{
padding: 10px;
}
.modal-dialog .modal-ct .footer{
padding: 10px;
border-top: 1px solid #eee;
}
.modal-dialog .modal-ct .footer:after{
content: '';
display: table;
clear: both;
}
.modal-dialog .modal-ct .footer .btn{
float: right;
margin-left: 10px;
}
.open{
display: block;
}
</style>
</head>
<body>
<div class="btn-group">
<button id="btn-modal">点我1</button>
</div>
<div id="modal-1" class="modal-dialog">
<div class="modal-ct">
<div class="header">
<h3>我是标题1</h3>
<a class="close" href="#">x</a>
</div>
<div class="content">
<p>我是内容1</p>
<p>我是内容1</p>
</div>
<!-- <div class="footer">
<a class="btn btn-confirm" href="#">确定</a>
<a class="btn btn-cancel" href="#">取消</a>
</div> -->
</div>
</div>
<script>
var btn = document.querySelector('#btn-modal'),
modal = document.querySelector('#modal-1'),
modalCt = document.querySelector('#modal-1 .modal-ct'),
close = document.querySelector('#modal-1 .close');
btn.addEventListener('click', function(){
modal.classList.add('open')
})
close.addEventListener('click', function(){
modal.classList.remove('open')
})
modal.addEventListener('click', function(){
modal.classList.remove('open')
})
modalCt.addEventListener('click', function(e){
e.stopPropagation()
})
</script>
</body>
</html>
