1： 實(shí)現(xiàn)如下圖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內(nèi)容</li>
<li>我是tab2內(nèi)容</li>
<li>我是tab3內(nèi)容</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循環(huán)去遍歷也可以
// tabs[i].addEventListener('click', function(){
// console.log(this)
// })
// }
tabs.forEach(function(tab){ //使用遍歷部念，給tabs 里的 每一個(gè)tab （li） 綁定事件
tab.addEventListener('click', function(){
tabs.forEach(function(node){ //遍歷的時(shí)候缘滥，每一次薪棒，先再來個(gè)遍歷金砍，去除所有的active class
node.classList.remove('active')
}) // this之外， 還可以是e.target window.event.target
this.classList.add('active') // 然后給當(dāng)前的tab添加active
// 接下來贬派，點(diǎn)擊header 里面的li，如何對(duì)應(yīng)上 content里面的li
// 這就需要知道點(diǎn)擊的是第幾個(gè)li澎媒，有兩種方法：
// this 看索引號(hào) 搞乏， 獲得數(shù)組循環(huán)對(duì)比
var index = [].indexOf.call(tabs, this) //找到當(dāng)前l(fā)i的index
panels.forEach(function(node){ //同上，先去除content里面所有l(wèi)i的active class
node.classList.remove('active')
})
panels[index].classList.add('active') //給與tab對(duì)應(yīng)的content li添加active
})
})
// 注意點(diǎn)
// 1. 數(shù)組遍歷要熟練戒努， 2. classList操作要熟練 3. 綁定事件
</script>
</body>
</html>
完成效果
2. 實(shí)現(xiàn)下圖的模態(tài)框功能查描，點(diǎn)擊模態(tài)框不隱藏，點(diǎn)擊關(guān)閉以及模態(tài)框以外的區(qū)域模態(tài)框隱藏
<!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柏卤，是為了展示整個(gè)modal冬三，所添加的cover，上面的區(qū)別在于缘缚，沒有display: none;
這里提供參考勾笆，在css最末尾用了個(gè)較為簡單明了的方法，可以滿足目前的簡單需求 */
/* .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">點(diǎn)我1</button>
</div>
<div id="modal-1" class="modal-dialog">
<div class="modal-ct">
<div class="header">
<h3>我是標(biāo)題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(){ //默認(rèn)模態(tài)框隱藏桥滨，現(xiàn)在要展示 加clas或操作style(最好前者 比如加個(gè)open)
modal.classList.add('open')
})
// 聲明一個(gè)事件處理函數(shù)窝爪，以便 x 確定 取消， 都能綁定相同的操作
function handler(){
modal.classList.remove('open')
}
close.addEventListener('click', handler)
btnConfirm.addEventListener('click', handler)
btnCancel.addEventListener('click', handler)
// 現(xiàn)在希望點(diǎn)擊模態(tài)框以外的齐媒，也能消失
modal.addEventListener('click', function(){
modal.classList.remove('open')
})
// 但是點(diǎn)擊到里面的 ct容器蒲每，會(huì)向上冒泡，從而也會(huì)隱藏modal喻括，所以需要取消ct的事件冒泡
modalCt.addEventListener('click',function(e){
e.stopPropagation()
})
</script>
</body>
</html>
完成效果
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
