选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box div {
width: 300px;
height: 300px;
border: 2px solid red;
display: none;
}
</style>
</head>
<body>
<div id="box">
<button>按钮一</button>
<button>按钮二</button>
<button>按钮三</button>
<div style="display: block">aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
//js部分
<script>
function TabSwitch() {
var oBox = document.getElementById("box"); //
this.oBtn = oBox.getElementsByTagName("button");
this.oDiv = oBox.getElementsByTagName("div");
var _this = this;
for (var i = 0; i < this.oBtn.length; i++) {
this.oBtn[i].index = i;
this.oBtn[i].onclick = function () {
//调用切换的方法
_this.change(this.index);
}
}
}
TabSwitch.prototype.change = function (index) {
for (var j = 0; j < this.oDiv.length; j++) {
this.oDiv[j].style.display = "none";
}
this.oDiv[index].style.display = "block";
}
new TabSwitch();
</script>
</body>
</html>
