<!doctype html>
<html>
<head>
<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 solid #ccc;
padding: 20px 10px;
border-radius: 4px;
}
.tab-header{
border-bottom: 1px solid #ccc;
}
.tab-header>li{
float: left;
color: brown;
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-color: #fff;
border-radius: 4px 4px 0 0;
color: #333;
margin-bottom: -1px;
}
.tab-container{
padding: 20px 10px;
}
.tab-container>li{
display: none;
}
.tab-container>.active{
display: block;
}
</style>
</head>
<body>
<div class="tab">
<ul class="tab-header clearfix">
<li class="active">option1</li>
<li>option2</li>
<li>option3</li>
</ul>
<ul class="tab-container">
<li class="active">content1</li>
<li>content2</li>
<li>content3</li>
</ul>
</div>
<script>
var tabHeader = document.querySelector(".tab-header")
var tabLis = document.querySelectorAll(".tab-header>li")
var 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>
</body>
</html>
- 实现下图的模态框功能，点击模态框不隐藏，点击关闭以及模态框以外的区域模态框隐藏
<!doctype html>
<html>
<head>
<style>
.modal-dialog {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.8);
}
.modal-dialog .btn {
display: inline-block;
padding: 3px 6px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 14px;
}
.modal-dialog a {
text-decoration: none;
color: #333;
}
.modal-dialog .cover {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
opacity: 0.4;
z-index: 99;
}
.modal-dialog .modal-ct {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 400px;
border-radius: 3px;
border: 1px solid #ccc;
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;
top: 10px;
line-height: 1;
}
.modal-dialog .modal-ct .content {
padding: 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>我是标题</h3>
<a href="#" class="close">x</a>
</div>
<div class="content">
<p>我是内容</p>
<p>我是内容</p>
</div>
</div>
</div>
<script>
var btn = document.querySelector("#btn-modal")
var modal = document.querySelector("#modal-1")
var modalCt = document.querySelector("#modal-1 .modal-ct")
var close = document.querySelector("#modal-1 .close")
btn.addEventListener("click", function(){
modal.classList.add("open")
})
close.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>
