Appearance
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.tab-bar {
margin: 30px auto;
width: 500px;
}
.tab-bar .tab {
position: relative;
top: 1px;
}
.tab-bar .tab li{
float: left;
list-style-type: none;
height: 35px;
font-size: 14px;
padding: 0 10px;
margin-right: 10px;
border: 1px solid black;
line-height: 35px;
background-color: #ddd;
}
.tab-bar div {
box-sizing: border-box;
width: 500px;
height: 150px;
border: 1px solid black;
padding: 10px 10px;
float: left;
display: none;
}
.tab-bar .tab li.active {
background-color: #fff;
border-bottom: 1px solid transparent;
}
.tab-bar div.active {
display: block;
}
</style>
</head>
<body>
<section class="tab-bar" id="tab-bar">
<ul class="tab">
<li index='0' class="active">编程</li>
<li index='1'>读书</li>
<li index='2'>运动</li>
</ul>
<div class='active'>编程</div>
<div >读书</div>
<div >运动</div>
</section>
<script>
const lis = document.querySelectorAll('.tab-bar .tab li')
const boxs = document.querySelectorAll('div')
// 默认上一项是0
let prev = 0
// let 本质是块级私有作用域+闭包
// for (let i = 0; i < lis.length; i++) {
// lis[i].onclick = function () {
// // 如果当前点击的和上一次点击的是同一项，不做处理
// if (prev === i) return
// // 不是同一项，清除上一项的active
// lis[prev].className = ''
// boxs[prev].className = ''
// // 这一项设置active
// lis[i].className = 'active'
// boxs[i].className = 'active'
// // 设置这一项为下次点击时的上一项
// prev = i
// }
// }
// 闭包
// for (var i = 0; i < lis.length; i++) {
// lis[i].onclick = (function (i) {
// // 自执行函数返回结果被占用了，形成闭包
// return function () {
// // 如果当前点击的和上一次点击的是同一项，不做处理
// if (prev === i) return
// // 不是同一项，清除上一项的active
// lis[prev].className = ''
// boxs[prev].className = ''
// // 这一项设置active
// lis[i].className = 'active'
// boxs[i].className = 'active'
// // 设置这一项为下次点击时的上一项
// prev = i
// }
// })(i)
// }
// 闭包
// for (var i = 0; i < lis.length; i++) {
// (function (i) {
// // 小函数被占用了，形成闭包
// lis[i].onclick = function () {
// // 如果当前点击的和上一次点击的是同一项，不做处理
// if (prev === i) return
// // 不是同一项，清除上一项的active
// lis[prev].className = ''
// boxs[prev].className = ''
// // 这一项设置active
// lis[i].className = 'active'
// boxs[i].className = 'active'
// // 设置这一项为下次点击时的上一项
// prev = i
// }
// })(i)
// }
// 闭包
// lis.forEach((item, i) => {
// // 小函数被占用，形成闭包
// item.onclick = function () {
// // 如果当前点击的和上一次点击的是同一项，不做处理
// if (prev === i) return
// // 不是同一项，清除上一项的active
// lis[prev].className = ''
// boxs[prev].className = ''
// // 这一项设置active
// lis[i].className = 'active'
// boxs[i].className = 'active'
// // 设置这一项为下次点击时的上一项
// prev = i
// }
// })
// 自定义属性 推荐
// for (let i = 0; i < lis.length; i++) {
// lis[i].myIndex = i
// lis[i].onclick = function () {
// // 如果当前点击的和上一次点击的是同一项，不做处理
// if (prev === this.myIndex) return
// // 不是同一项，清除上一项的active
// lis[prev].className = ''
// boxs[prev].className = ''
// // 这一项设置active
// lis[this.myIndex].className = 'active'
// boxs[this.myIndex].className = 'active'
// // 设置这一项为下次点击时的上一项
// prev = this.myIndex
// }
// }
// 事件委托 最推荐
const tabBar = document.getElementById("tab-bar")
const tab = document.querySelector('.tab')
tabBar.onclick = function (event) {
if (event.target.tagName === 'LI') {
// 标签内手动设置index
// let i = +event.target.getAttribute('index')
// 计算出index
let i = Array.prototype.indexOf.call(tab.children, event.target)
if (prev === i) return
// 不是同一项，清除上一项的active
lis[prev].className = ''
boxs[prev].className = ''
// 这一项设置active
lis[i].className = 'active'
boxs[i].className = 'active'
// 设置这一项为下次点击时的上一项
prev = i
}
}
// function changeTab (n) {
// // 清除所有选中样式，鼠标滑过谁再给谁样式
// for (let i = 0; i < lis.length; i++) {
// lis[i].className = ''
// boxs[i].className = ''
// }
// lis[n].className = 'active'
// boxs[n].className = 'active'
// }
// for (let i = 0; i < lis.length; i++) {
// lis[i].onmouseover = function () {
// changeTab(i)
// }
// }
</script>
</body>
</html>