Tap效果
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab效果</title>
<style>
ul,li {
margin: 0;
padding: 0;
}
.tab {
width: 600px;
margin: 20px auto;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px 10px;
}
.tab ul {
list-style: none;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.tab-header {
border-bottom: 1px solid #ccc;
}
.tab-header>li {
float: left;
padding: 5px 20px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
cursor: pointer;
color: #337ab7;
}
.tab-header .active {
color: #000;
border: 1px solid #ccc;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.tab-content {
padding: 20px 0 20px 0;
}
.tab-content>li {
display: none;
}
.tab-content>.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<ul class="tab-header clearfix">
<li class="active">事件</li> <!--active是默認展示的-->
<li>事件流</li>
<li>事件處理程序</li>
</ul>
<ul class="tab-content">
<li class="active"> <!--active是默認展示的-->
<p>
JavaScript和HTML的交互是通過事件實現(xiàn)的。
JavaScript采用異步事件驅(qū)動編程模型，當文檔、瀏覽器、元素或與之相關(guān)對象發(fā)生特定事情時，
瀏覽器會產(chǎn)生事件。如果JavaScript關(guān)注特定類型事件，那么它可以注冊當這類事件發(fā)生時要調(diào)用的句柄。
</p>
</li>
<li>
<p>
事件流描述的是從頁面中接收事件的順序，比如有兩個嵌套的div，點擊了內(nèi)層的div，這時候是內(nèi)層的div先觸發(fā)click事件還是外層先觸發(fā)？目前主要有三種模型：
</p>
<p>
1.IE的事件冒泡：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素。
</p>
<p>
2.Netscape的事件捕獲：不太具體的節(jié)點更早接收事件，而最具體的元素最后接收事件，和事件冒泡相反。
</p>
<p>
3.DOM事件流：DOM2級事件規(guī)定事件流包括三個階段，事件捕獲階段，處于目標階段，事件冒泡階段，首先發(fā)生的是事件捕獲，
為截取事件提供機會，然后是實際目標接收事件，最后是冒泡階段。
</p>
</li>
<li>
<p>
我們也稱之為事件偵聽器（listener），事件就是用戶或瀏覽器自身執(zhí)行的某種動作。
比如click、load、mouseover等，都是事件類型（俗稱事件名稱），而響應(yīng)某個事件的方法就叫做事件處理程序或者事件監(jiān)聽器。
</p>
<p>
也就是我們需要提前定義好某些事件發(fā)生了該怎么處理，這個過程叫做綁定事件處理程序，了解了這些，我們看看如何給元素添加事件處理程序。
</p>
</li>
</ul>
</div>
<script>
var tabHeader = document.querySelector('.tab-header');
var tabHeaderLis = document.querySelectorAll('.tab-header>li');
var tabContentLis = document.querySelectorAll('.tab-content>li');
tabHeader.addEventListener('click',function(e){
var clickNode = e.target; //點擊的節(jié)點
if(clickNode.tagName.toLowerCase() === 'li'){
for(i=0; i<tabHeaderLis.length; i++){ //遍歷tabHeaderLis
tabHeaderLis[i].classList.remove('active'); //刪除tabHeaderLis下的所有active類 active類指的是邊框效果 border: 1px solid #ccc;
}
clickNode.classList.add('active'); //給點擊的節(jié)點添加active類 active類指的是邊框效果 border: 1px solid #ccc;
var idx = [].indexOf.call(tabHeaderLis,clickNode); //ES5的方法遍歷tabHeaderLis 賦值給下標
for(i=0; i<tabContentLis.length; i++){
tabContentLis[i].classList.remove('active'); //給所有的內(nèi)容先刪除active類 active類指的是內(nèi)容是否展現(xiàn) display: block;
}
tabContentLis[idx].classList.add('active'); //得到賦值的下標的內(nèi)容添加active類 active類指的是內(nèi)容是否展現(xiàn) display: block;
}
})
</script>
</body>
</html>
模態(tài)框效果
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模態(tài)框效果</title>
<style>
clearfix::after {
content: '';
display: block;
clear: both;
}
.active {
background-color: #ddd;
}
#btn {
padding: 5px 15px;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
}
.box {
width: 600px;
height: 220px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -110px;
margin-left: -300px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 0 0 4px 1px #aaa;
display: none;
}
.box .header {
border-bottom: 1px solid #ccc;
}
.box .header .close {
float: right;
color: purple;
padding: 0 20px;
cursor: pointer;
}
.box .header h1 {
font-size: 18px;
font-weight: 500;
padding-left: 10px;
}
.box .content {
border-bottom: 1px solid #ccc;
}
.box .content p {
padding-left: 10px;
}
.box .footer span {
float: right;
padding: 10px 20px 0 0;
cursor: pointer;
}
.box .footer span:nth-child(2) {
padding: 10px 10px;
}
</style>
</head>
<body>
<bottom id="btn">點我</bottom>
<div class="box">
<div class="header clearfix">
<span class="close">X</span>
<h1>我是標題</h1>
</div>
<div class="content">
<p>我是內(nèi)容</p>
<p>我是內(nèi)容</p>
<p>我是內(nèi)容</p>
</div>
<div class="footer">
<span>確定</span>
<span class="cancel">取消</sapn>
</div>
</div>
<script>
var btn = document.querySelector('#btn');
var box = document.querySelector('.box');
var close = document.querySelector('.close');
var cancel = document.querySelector('.cancel');
btn.addEventListener('click',function(e){
e.stopPropagation(); //阻止btn事件冒泡，一旦冒泡，就會執(zhí)行112行代碼，使得box出現(xiàn)后又再次消失。
box.style.display = 'block';
document.body.classList.add('active');
})
box.addEventListener('click',function(e){
e.stopPropagation(); //阻止box事件冒泡，一旦冒泡，就會執(zhí)行112行代碼，使得box出現(xiàn)后又再次消失。
})
window.addEventListener('click',function(){
box.style.display = 'none';
document.body.classList.remove('active'); //給body添加一個active的類。
})
close.addEventListener('click',function(){
box.style.display = 'none';
document.body.classList.remove('active');
})
cancel.addEventListener('click',function(){
box.style.display = 'none';
document.body.classList.remove('active');
})
</script>
</body>
</html>
