107 lines
2.4 KiB
HTML
107 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>tab选项卡</title>
|
|
<style>
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
ul,
|
|
li {
|
|
list-style: none;
|
|
}
|
|
|
|
.warp {
|
|
width: 900px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #000;
|
|
}
|
|
|
|
.warp .tab-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.warp .tab-header li {
|
|
width: 300px;
|
|
border: 1px solid #000;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
line-height: 2;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.warp .tab-header .active {
|
|
background: grey;
|
|
}
|
|
|
|
.warp .tab-panel li {
|
|
display: none;
|
|
height: 100px;
|
|
}
|
|
|
|
.warp .tab-panel .active {
|
|
display: block;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="warp">
|
|
<ul class="tab-header">
|
|
<li class="active">tab1</li>
|
|
<li>tab2</li>
|
|
<li>tab3</li>
|
|
</ul>
|
|
<ul class="tab-panel">
|
|
<li class="active">内容1</li>
|
|
<li>内容2</li>
|
|
<li>内容3</li>
|
|
</ul>
|
|
</div>
|
|
<script>
|
|
var Tab = {
|
|
init: function () {
|
|
this.warp = document.querySelector('.warp .tab-header');
|
|
console.log(this.warp)
|
|
this.tab_header = document.querySelectorAll('.tab-header > li')
|
|
console.log(this.tab_header)
|
|
this.tab_panel = document.querySelectorAll('.warp .tab-panel > li')
|
|
console.log(this.tab_panel)
|
|
this.bind()
|
|
},
|
|
bind: function () {
|
|
this.warp.addEventListener('click', function (e) {
|
|
// e 真正产生事件的源对象
|
|
// 使用父元素做代理，利用冒泡，只绑定一个事件处理三个点击
|
|
var target = e.target
|
|
console.log(target.nodeName)
|
|
if (target.nodeName === 'LI') {
|
|
console.log(this.tab_header)
|
|
for (var i = 0; i < this.tab_header.length; i++) {
|
|
this.tab_header[i].classList.remove('active')
|
|
this.tab_panel[i].classList.remove('active')
|
|
}
|
|
target.classList.add('active')
|
|
var index = [].indexOf.call(this.tab_header, target)
|
|
this.tab_panel[index].classList.add('active')
|
|
}
|
|
console.log(this.tab_header)
|
|
}.bind(this))
|
|
}
|
|
}
|
|
Tab.init()
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|