<div class="tab">
<div class="title">
<span class="active">标题1</span>
<span>标题2</span>
<span>标题3</span>
</div>
<div class="content">
<span class="active">标题1的内容</span>
<span class="">标题2的内容</span>
<span class="">标题3的内容</span>
</div>
</div>
<script>
// 获取三个标题
var titleSpans = document.querySelectorAll(".title span");
// 获取三个内容
var contentSpans = document.querySelectorAll(".content span");
// 面向对象 第一步 定义类
function Tab(titleSpans, contentSpans) {
// 定义标题集合属性
this.titleSpans = titleSpans
// 定义内容集合属性
this.contentSpans = contentSpans;
}
// 定义绑定事件方法
Tab.prototype.bindEvent = function() {
var _this = this;
console.log(_this)
console.log(Tab)
// 循环给每一个标题添加点击事件
for (var i = 0; i < this.titleSpans.length; i++) {
this.titleSpans[i].idx = i;
this.titleSpans[i].onclick = function() {
_this.change(this.idx);
}
}
}
// 定义change方法
Tab.prototype.change = function(idx) {
for (var i = 0; i < this.contentSpans.length; i++) {
if (i === idx) {
this.contentSpans[i].className = "active";
} else {
this.contentSpans[i].className = "";
}
}
for (var i = 0; i < this.titleSpans.length; i++) {
if (i === idx) {
this.titleSpans[i].className = "active";
} else {
this.titleSpans[i].className = "";
}
}
}
var tab = new Tab(titleSpans, contentSpans);
tab.bindEvent();
</script>