題目1： 實(shí)現(xiàn)如下圖Tab切換的功能
Tab切換效果
<style>
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
}
.clearfix:after{
content:'';
display:block;
clear:both;
}
.tab{
width:600px;
margin:20px auto;
border:1px dashed #ccc;
padding:20px 10px;
border-radius:5px;
}
.tab-header{
border-bottom:1px solid #ccc;
}
.tab-header>li{
float:left;
color:#cfcfcf;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
padding:10px 20px;
cursor:pointer;
}
.tab-header .active{
border:1px solid #ccc;
border-bottom:#fff;
border-radius:5px 5px 0 0;
color:#333;
background:#c3c3ce;
margin-bottom:-1px;
}
.tab-container{
padding:20px 10px;
}
.tab-container>li{
display:none;
}
.tab-container>.active{
display:block;
}
.box{
height:1000px;
}
</style>
</head>
<body>
<div class="tab">
<ul class="tab-header clearfix">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<ul class="tab-container">
<li class="active">內(nèi)容1</li>
<li>內(nèi)容2</li>
<li>內(nèi)容3</li>
</ul>
</div>
<div class="box"></div>
<script>
var tabHeader=document.querySelector('.tab-header'),
tabLis=document.querySelectorAll('.tab-header>li'),
tabPanels=document.querySelectorAll('.tab-container>li');
tabHeader.addEventListener('click',function(e){
var clickNode=e.target;
if(clickNode.tagName.toLowerCase()==='li'){
for(var i=0;i<tabLis.length;i++){
tabLis[i].classList.remove('active');
}
clickNode.classList.add('active');
var index=[].indexOf.call(tabLis,clickNode);
console.log(index);
for(var i=0;i<tabPanels.length;i++){
tabPanels[i].classList.remove('active');
}
tabPanels[index].classList.add('active');
}
})
</script>
題目2：實(shí)現(xiàn)下圖的模態(tài)框功能，點(diǎn)擊模態(tài)框不隱藏干像，點(diǎn)擊關(guān)閉以及模態(tài)框以外的區(qū)域模態(tài)框隱藏
模態(tài)框
<div class="btn-group">
<button id="btn-modal">點(diǎn)我</button>
</div>
<div id="modal-1" class="modal-dialog">
<div class="cover"></div>
<div class="modal-ct">
<div class="header">
<h3>標(biāo)題</h3>
<a class="close" href="#">x</a>
</div>
<div class="content">
<p>內(nèi)容1</p>
<p>內(nèi)容2</p>
<p>內(nèi)容3</p>
</div>
<div class="footer">
<a class="btn btn-confirm" href="#">確定</a>
<a class="btn btn-cancel" href="#">取消</a>
</div>
</div>
</div>
<script>
var btn=document.querySelector('#btn-modal'),
modal=document.querySelector('#modal-1'),
modalCt=document.querySelector('#modal-1 .modal-ct');
btn.addEventListener('click',function(e){
e.stopPropagation();
showModal(modal);
});
modalCt.addEventListener('click',function(e){
e.stopPropagation();
if(hasClass(e.target,'close')||hasClass(e.target,'btn-cancel')){
hideModal(modal);
}
});
document.body.addEventListener('click',function(){
hideModal(modal);
});
function showModal(modal){
modal.style.display='block';
}
function hideModal(modal){
modal.style.display="none";
}
function hasClass(ele,cls){
return !!ele.className.match(new RegExp('\\b'+cls+'\\b'));
}
