<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
样式
<style>
.active {
color: orange;
}
.parent {
border: 2px solid #000;
width: 200px;
height: 200px;
background: -webkit-radial-gradient(rgb(144, 132, 144), rgb(14, 172, 225), rgb(16, 243, 164));
border-radius: 5px;
}
.parent span {
height: 30px;
line-height: 30px;
padding: 12px;
border-bottom: 2px solid #000;
}
.parent div {
margin-top: 50px;
text-align: center;
color: wheat;
}
</style>
<body>
div模块
<div class="parent">
<span class="title">title1</span>
<span class="title">title2</span>
<span class="title">title3</span>
<div class="content">content1</div>
<div class="content">content2</div>
<div class="content">content3</div>
</div>
script代码
<script>
class Tabs {
constructor(el) {
this.el = document.querySelector(el);
this.init();// 初始化
this.bindEvent();// 绑定事件
}
init() {
// 获取titles
this.titles = this.el.querySelectorAll(".title");
// 获取contents
this.contents = this.el.querySelectorAll(".content");
// 默认所有的div
for (let i = 0; i < this.contents.length; i++) {
this.contents[i].style.display = "none";
}
// 显示第一个content
this.contents[0].style.display = "block";
// 给第一个title添加active类
this.titles[0].classList.add("active");
// 记录当前是第几个显示的
this.currentIndex = 0;
}
bindEvent() {
for (let i = 0; i < this.titles.length; i++) {
this.titles[i].addEventListener("click", () => {
this.titleHd(i);
}, false);
}
}
titleHd(index) {
console.log(index, "被单击了");
console.log("把以前显示的div隐藏");
console.log("显示" + index + "div");
console.log("把以前active去掉");
console.log("给" + index + "title加active");
console.log("设置当前currentIndex 为" + index);
this.titles[this.currentIndex].classList.remove("active");
this.contents[this.currentIndex].style.display = "none";
this.titles[index].classList.add("active");
this.contents[index].style.display = "block";
this.currentIndex = index;
}
}
var tab = new Tabs(".parent");
</script>
</body>
</html>
网友评论