------------恢复内容开始------------
HTML+CSS：
上面三个按钮，
下面三个div内容容器。
JS：
调用关系
function Tab( btn_selector , content_selector , index = 0 ){
}
Tab.prototype.bindEvent = function(){
this_instance.getIndex(this);
this_instance.changeContent();
}
Tab.prototype.getIndex = function( dom ){
}
Tab.prototype.changeContent = function(){
this.removeClass(this.btn_eles[i],"active");
this.removeClass(this.content_eles[i],"active");
}
Tab.prototype.removeClass = function( dom , removedClass ){
}
Demo：
<!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>tab标签，把鼠标移到标签上会显示对应的内容</title>
<style>
.container {
width: 500px;
height: 300px;
background-color: green;
margin: 0 auto;
}
.btn-list {
width: 500px;
height: 100px;
background: pink;
display: flex;
}
.btn-list button {
flex: 1;
background: lightblue;
}
.btn-list button.active {
background: lightcoral;
}
.content-list {
width: 500px;
height: 200px;
background: blueviolet;
}
.box {
width: 100%;
height: 100%;
display: none;
}
.box.active {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="btn-list">
<button button-index="0">按钮1</button>
<button button-index="1">按钮2</button>
<button button-index="2">按钮3</button>
</div>
<div class="content-list">
<div class="box" style="background-color: red;"></div>
<div class="box" style="background-color: yellow;"></div>
<div class="box" style="background-color: blue;"></div>
</div>
</div>
<script>
//记住三句话
//1.构造函数是创建实例对象用的
//2.构造函数里面的this指向实例对象
//3.实例对象可以直接访问原型对象上的属性，比如下面的index
// 声明Tab()构造函数,参数是CSS选择器字符串和index
function Tab(btn_selector, content_selector, index = 0) {
//2.构造函数里面的this指向实例对象
// 获取按钮元素对象
this.btn_eles = document.querySelectorAll(btn_selector);
// 获取内容对象
this.content_eles = document.querySelectorAll(content_selector);
// 获取index值
this.index = index;
}
// 给构造函数添加bindEvent()方法，绑定鼠标划过事件
Tab.prototype.bindEvent = function () {
// 原型对象之中的方法可以通过this直接访问实例对象;
var this_instance = this;
// 遍历按钮元素对象
for (var i = 0; i < this.btn_eles.length; i++) {
// 事件触发函数
this.btn_eles[i].onmouseover = function () {
// 事件处理函数里面的this指向当前触发事件的元素
// 因为我要在这个函数中访问getIndex()和changgecontent()功能，
// 那么也就意味着我需要访问实例对象
// 因为此时this已经指向了dom对象
// 所以我需要想办法找到实例对象的地址指向
// 方案：在this最后还指向实例对象的时候用变量保存下this指针的指向
// 接着还要把触发事件的dom对象的this指向传递进getIndex之中
// 调用getIndex()，实时更新index
this_instance.getIndex(this);
// 调用changeContent()，实时更新Content
this_instance.changeContent();
}
}
}
//给构造函数添加getIndex()方法，传入参数是dom元素对象
Tab.prototype.getIndex = function (dom) {
//2.构造函数里面的this指向实例对象
//在btn_eles 这组dom元素中，找到当前触发事件的dom元素，获取这个dom元素的下表
for (var i = 0; i < this.btn_eles.length; i++) {
// 判断当前的触发元素是dom元素数组中的哪一个位置上的元素
if (dom === this.btn_eles[i]) {
//将找到的下标i赋给当前实例对象的index属性
this.index = i;
//找到立即跳出，跳出循环
break;
}
}
}
//给构造函数Tab()添加changeContent方法
Tab.prototype.changeContent = function () {
// 使用循环清除按钮和内容的样式
for (var i = 0; i < this.btn_eles.length; i++) {
// 调用removeClass()清除按钮元素对象的样式
this.removeClass(this.btn_eles[i], "active");
// 调用removeClass()清除内容元素对象的样式
this.removeClass(this.content_eles[i], "active");
}
// 加载样式到按钮元素对象上
this.btn_eles[this.index].className += "active";
// 加载样式到内容元素对象上
this.content_eles[this.index].className += " active";
console.log(this.content_eles[this.index]);
}
//给构造函数Tab()添加removeClass()方法
Tab.prototype.removeClass = function (dom, removedClass) {
// 设定正则表达 "\\s?" + className
var reg = new RegExp("\\s?" + removedClass);
// 使用replace()替换
dom.className = dom.className.replace(reg, "");
}
// 生成实例对象
var tab = new Tab(".btn-list button", ".box");
// 调用bindEvent()方法来绑定事件
tab.bindEvent();
</script>
</body>
</html>
浙公网安备 33010602011771号