代码1 ：
<!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;
}
.box{
height: 1000px;
}
</style>
</head>
<body>
<div class="tab">
<ul class="tab-header clearfix">
<li class="active">选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
<ul class="tab-container">
<li class="active">内容1
<ul>
<li></li>
</ul>
</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
<div class="box"></div>
hello
<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');
}
})
function $(id){
return document.querySelector(id);
}
function $$(cls){
return document.querySelectorAll(cls);
}
</script>
</body>
</html>
代码2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<style>
.modal-dialog {
display: none;
}
.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: #333;
}
.modal-dialog .cover {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 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;
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="cover"></div>
<div class="modal-ct">
<div class="header">
<h3>我是标题1</h3>
<a class="close" href="#">×</a>
</div>
<div class="content">
<p>我是内容1</p>
<p>我是内容1</p>
</div>
<div class="footer">
<a class="btn btn-confirm" href="#">确定</a>
<a class="btn btn-cancel" href="#">取消</a>
</div>
</div>
</div>
<script>
var close = document.querySelector(".close");
var modal = document.querySelector(".modal-dialog");
var button = document.querySelector("#btn-modal");
var modalCt =document.querySelector(".modal-ct");
button.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();
})
