1.实现如下图Tab切换的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul,li{
margin:0;
padding: 0;
}
li{
list-style: none;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
.tab-ct{
width: 600px;
margin: 20px auto;
border:1px solid #ccc;
padding:20px 10px;
border-radius:4px;
}
.header li{
float: left;
color:cadetblue;
width:33.3333333%;
padding:10px 0px;
cursor: pointer;
background-color: red;
}
.content li{
display: none;
float: left;
background-color: #ccc;
width: 600px;
height: 100px;
}
.header .active{
background-color: antiquewhite;
}
.content .active{
display: block;
}
</style>
</head>
<body>
<div class="tab-ct">
<ul class="header clearfix">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<ul class="content clearfix" >
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
var ct=document.querySelector('.tab-ct')
var header=document.querySelector('.header')
var headerLis=document.querySelectorAll('.header>li')
var contentLis=document.querySelectorAll('.content>li')
header.addEventListener('click',function () {
})
headerLis.forEach(function (t) {
t.addEventListener('click',function () {
headerLis.forEach(function (t2) {
t2.classList.remove('active')
})
this.classList.add('active')
var index=[].indexOf.call(headerLis,this)
contentLis.forEach(function (t2) {
t2.classList.remove('active')
})
contentLis[index].classList.add('active')
})
})
</script>
</body>
</html>
2.实现下图的模态框功能，点击模态框不隐藏，点击关闭以及模态框以外的区域模态框隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
color: #333;
}
.modal{
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.8;
z-index: 99;
}
.modal-ct{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 400px;
border-radius: 3px;
background: #fff;
z-index: 100;
border:1px solid;
}
.header {
position: relative;
height: 36px;
line-height: 36px;
border-bottom: 1px solid #ccc;
}
h3{
margin: 0;
padding-left: 10px;
font-size: 16px;
}
.close{
position: absolute;
right: 10px;
top: 10px;
line-height: 1;
}
.content{
padding: 10px;
}
.footer{
padding: 10px;
border-top: 1px solid #eee;
}
.btn{
float: right;
margin-left: 10px;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
.open{
display: block;
}
</style>
</head>
<body>
<div class="btn-ct">
<button>点我</button>
</div>
<div class="modal">
<div class="modal-ct">
<div class="header">
<h3>我是标题</h3>
<a class="close" href="#">x</a>
</div>
<div class="content">
<p>我是内容</p>
<p>我是内容</p>
</div>
<div class="footer clearfix">
<a href="#" class="btn cancel">取消</a>
<a href="#" class="btn confirm">确定</a>
</div>
</div>
</div>
<script>
var btn=document.querySelector('.btn-ct')
var modal=document.querySelector('.modal')
var modalCt=document.querySelector('.modal-ct')
var close=document.querySelector('.close')
var cancel=document.querySelector('.cancel')
btn.addEventListener('click',function () {
modal.classList.add('open')
})
close.addEventListener('click',function () {
modal.classList.remove('open')
})
cancel.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>
网友评论