题目1： 实现如下图Tab切换的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jinjie10-2</title>
<style>
a {
text-decoration: none;
}
.container{
position: relative;
}
.cover {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: .4;
background-color: #000;
z-index: 66;
}
.box{
position: fixed;
width: 400px;
background-color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 1px solid #ccc;
border-radius: 6px;
padding: 20px;
z-index: 88;
}
.header {
/*line-height: 4em;*/
border-bottom: 1px solid #ccc;
}
.header a{
float: right;
margin-top: -80px;
}
.content {
padding: 40px;
border-bottom: 1px solid #ccc;
}
.footer {
float: right;
padding: 20px;
}
.dispear {
display: none;
}
</style>
</head>
<body>
<button class="btn">点我</button>
<div class="container">
<div class="cover"></div>
<div class="box dispear">
<div class="header">
<h1>我是标题</h1>
<a href="#" class="close">x</a>
</div>
<div class="content">
<p>我是内容</p>
<p>我是内容</p>
</div>
<div class="footer">
<a href="#" class="cancel">取消</a>
<a href="#">确定</a>
</div>
</div>
</div>
<script>
var btn = document.querySelector('.btn')
var box = document.querySelector('.box')
var cover= document.querySelector('.cover')
var close = document.querySelector('.close')
var cancel = document.querySelector('.cancel')
btn.addEventListener('click',function(e){
e.stopPropagation()
box.classList.remove('dispear')
cover.style.display = 'block'
})
box.addEventListener('click',function(e){
e.stopPropagation()
if(e.target === close || e.target === cancel){
box.classList.add('dispear')
cover.style.display = 'none'
}
})
cover.addEventListener('click',function(){
box.classList.add('dispear')
cover.style.display = 'none'
})
</script>
</cover>
</html>
网友评论