此案例主要实现点击按钮时让对应的按钮高亮和内容区域显示不同的内容
案例效果展示:
1.首先将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>
</head>
<body>
<div class="tab">
<!--按钮区域-->
<ul>
<li class="active">影片1</li>
<li>影片2</li>
<li>影片3</li>
<li>影片4</li>
<li>影片5</li>
</ul>
<!--内容区域-->
<div class="con" data-hello="100">
<div class="show">莫斯科行动</div>
<div>孤注一掷</div>
<div>坚如磐石</div>
<div>变形金刚</div>
<div>碟中谍7</div>
</div>
</div>
</body>
</html>
2.写css渲染样式
* {
margin: 0;
padding: 0;
}
.tab {
width: 500px;
min-height: 280px;
background-color: orange;
margin: 50px auto;
}
.tab ul {
height: 45px;
background-color: yellow;
display: flex;
justify-content: space-around;
align-items: center;
}
.tab ul li {
list-style: none;
width: 20%;
height: 100%;
text-align: center;
line-height: 45px;
cursor: pointer;
}
.tab .con {
height: 240px;
background-color: #ccc;
font-size: 14px;
line-height: 100px;
}
.tab .con div {
width: 100%;
height: 100%;
display: none;
}
.active {
background-color: greenyellow;
}
.show {
display: block !important;
}
3.写入js实现按钮高亮是切换内容
class Tab {
constructor(options) {
// 解构赋值
const { btn, content } = options
this.btns = document.querySelector(btn).children
this.contents = document.querySelector(content).children
console.log(this)
this.handleClick()
}
// 点击按钮
handleClick() {
console.log('>>>', this);
[...this.btns].forEach((it, index) => {
it.onclick = () => {
// 排他 高亮
this.changeActive(index)
}
})
}
changeActive(count) {
// this
[...this.btns].forEach((it, index) => {
it.classList.remove('active')
this.contents[index].classList.remove('show')
})
// 让对应索引的高亮
console.log(count)
this.btns[count].classList.add('active')
this.contents[count].classList.add('show')
}
}
let t1 = new Tab({
btn: '.tab>ul',
content: '.con'
})
这样就实现了案例所要实现的功能
完整代码:
<!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 {
width: 500px;
min-height: 280px;
background-color: orange;
margin: 50px auto;
}
.tab ul {
height: 45px;
background-color: yellow;
display: flex;
justify-content: space-around;
align-items: center;
}
.tab ul li {
list-style: none;
width: 20%;
height: 100%;
text-align: center;
line-height: 45px;
cursor: pointer;
}
.tab .con {
height: 240px;
background-color: #ccc;
font-size: 14px;
line-height: 100px;
}
.tab .con div {
width: 100%;
height: 100%;
display: none;
}
.active {
background-color: greenyellow;
}
.show {
display: block !important;
}
</style>
</head>
<body>
<div class="tab">
<!--按钮区域-->
<ul>
<li class="active">影片1</li>
<li>影片2</li>
<li>影片3</li>
<li>影片4</li>
<li>影片5</li>
</ul>
<!--内容区域-->
<div class="con" data-hello="100">
<div class="show">莫斯科行动</div>
<div>孤注一掷</div>
<div>坚如磐石</div>
<div>变形金刚</div>
<div>碟中谍7</div>
</div>
</div>
<script>
class Tab {
constructor(options) {
// 解构赋值
const { btn, content } = options
this.btns = document.querySelector(btn).children
this.contents = document.querySelector(content).children
console.log(this)
this.handleClick()
}
// 点击按钮
handleClick() {
console.log('>>>', this);
[...this.btns].forEach((it, index) => {
it.onclick = () => {
// 排他 高亮
this.changeActive(index)
}
})
}
changeActive(count) {
// this
[...this.btns].forEach((it, index) => {
it.classList.remove('active')
this.contents[index].classList.remove('show')
})
// 让对应索引的高亮
console.log(count)
this.btns[count].classList.add('active')
this.contents[count].classList.add('show')
}
}
let t1 = new Tab({
btn: '.tab>ul',
content: '.con'
})
</script>
</body>
</html>