1： 实现如下图Tab切换的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tab切换</title>
<style>
* {
box-sizing: border-box;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.tab-ct .header>li {
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #ccc;
display: inline-block;
margin-right: -5px;
border-right: none;
cursor: pointer;
}
.tab-ct .header>li:last-child {
border-right: 1px solid #ccc;
}
.tab-ct .header>li.active {
background: #a5daa6;
}
.tab-ct .content>li {
width: 149px;
height: 100px;
border: 1px solid #ccc;
background: #f5daa6;
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">我是tab1内容</li>
<li>我是tab2内容</li>
<li>我是tab3内容</li>
</ul>
</div>
<script>
var tabs = document.querySelectorAll('.tab-ct .header>li')
var panels = document.querySelectorAll('.tab-ct .content>li')
// for(var i = 0; i < tabs.length; i++){ // 使用for循环去遍历也可以
// tabs[i].addEventListener('click', function(){
// console.log(this)
// })
// }
tabs.forEach(function(tab){ //使用遍历，给tabs 里的 每一个tab （li） 绑定事件
tab.addEventListener('click', function(){
tabs.forEach(function(node){ //遍历的时候，每一次，先再来个遍历，去除所有的active class
node.classList.remove('active')
}) // this之外， 还可以是e.target window.event.target
this.classList.add('active') // 然后给当前的tab添加active
// 接下来，点击header 里面的li，如何对应上 content里面的li
// 这就需要知道点击的是第几个li，有两种方法：
// this 看索引号 ， 获得数组循环对比
var index = [].indexOf.call(tabs, this) //找到当前li的index
panels.forEach(function(node){ //同上，先去除content里面所有li的active class
node.classList.remove('active')
})
panels[index].classList.add('active') //给与tab对应的content li添加active
})
})
// 注意点
// 1. 数组遍历要熟练， 2. classList操作要熟练 3. 绑定事件
</script>
</body>
</html>
完成效果
2. 实现下图的模态框功能，点击模态框不隐藏，点击关闭以及模态框以外的区域模态框隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.modal-dialog {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:rgba(0,0,0,0.7);
}
.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:deepskyblue;
}
/* 下面的cover，是为了展示整个modal，所添加的cover，上面的区别在于，没有display: none;
这里提供参考，在css最末尾用了个较为简单明了的方法，可以满足目前的简单需求 */
/* .modal-dialog .cover {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.5;
z-index: 99;
} */
.modal-dialog .modal-ct {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
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 href="#" class="close">x</a>
</div>
<div class="content">
<p>我是第一段</p>
<p>我是第二段</p>
</div>
<div class="footer">
<a href="#" class="btn btn-confirm">确定</a>
<a href="#" class="btn btn-cancel">取消</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'),
btnConfirm = document.querySelector('.btn-confirm'),
btnCancel = document.querySelector('.btn-cancel')
btn.addEventListener('click', function(){ //默认模态框隐藏，现在要展示 加clas或操作style(最好前者 比如加个open)
modal.classList.add('open')
})
// 声明一个事件处理函数，以便 x 确定 取消， 都能绑定相同的操作
function handler(){
modal.classList.remove('open')
}
close.addEventListener('click', handler)
btnConfirm.addEventListener('click', handler)
btnCancel.addEventListener('click', handler)
// 现在希望点击模态框以外的，也能消失
modal.addEventListener('click', function(){
modal.classList.remove('open')
})
// 但是点击到里面的 ct容器，会向上冒泡，从而也会隐藏modal，所以需要取消ct的事件冒泡
modalCt.addEventListener('click',function(e){
e.stopPropagation()
})
</script>
</body>
</html>
完成效果
网友评论