html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
background: #f6f3f3;
border: 1px solid #ccc;
}
.active{
background: red;
}
#tabBox div{
width: 300px;
height: 250px;
display: none;
padding: 10px;
background: #e9d4d4;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div id="tabBox">
<input type="button" value="游戏" class="active">
<input type="button" value="旅行">
<input type="button" value="音乐">
<div style="display: block">芳华</div>
<div>澳大利亚</div>
<div>yellow</div>
</div>
</body>
</html>
第一种方法:面向过程的写法
window.onload = function () {
var tabBox = document.getElementById('tabBox');
var tabBtn = tabBox.getElementsByTagName('input');
var tabDiv = tabBox.getElementsByTagName('div');
for(var i=0;i<tabBtn.length;i++){
tabBtn[i].index = i;
tabBtn[i].onclick = function () {
for(var k= 0;k<tabDiv.length;k++){
tabBtn[k].className='';
tabDiv[k].style.display='none';
}
this.className = 'active';
tabDiv[this.index].style.display='block';
}
}
}
第二种方法: 面向对象的写法
window.onload = function () {
var tab = new Tab('tabBox','input' , 'div');
};
function Tab(id,btn,Content) {
var tabBox = document.getElementById(id);
this.tabBtn = tabBox.getElementsByTagName(btn);
this.tabDiv = tabBox.getElementsByTagName(Content);
for(var i=0; i<this.tabBtn.length ; i++){
this.tabBtn[i].index = i;
var _this = this;//this指向的是var tab = new Tab() ,即tab这个对象,注意是对象。
this.tabBtn[i].onclick = function () {
_this.clickBtn(this);//这句话里面的_this指向的是var tab = new Tab()构造函数这个对象,括号里面的this指向的点击事件对应的这个对象,这里的指的是input这个标签
};
}
}
Tab.prototype.clickBtn = function (btn) {
for(var k = 0;k<this.tabBtn.length;k++){
this.tabBtn[k].className = '';//clickBtn这个方法里面的this指向的是var tab = new Tab() ,即tab这个对象
this.tabDiv[k].style.display = 'none';
}
btn.className = 'active';
this.tabDiv[btn.index].style.display = 'block';
}
封装成一个通用的tab.js,使用tab切换的时候直接引用就可以
参数说明 :第一个参数是整个Tab切换最外层的id名,第二个参数是切换按钮的标签名,第三个参数是要切换内容的标签名,我们在调用的时候要首先创建一个Tab这个对象,然后再调用这个构造行数;例如: var tab = new Tab('tabBox','input' , 'div');
function Tab(id,btn,Content) {
var tabBox = document.getElementById(id);
this.tabBtn = tabBox.getElementsByTagName(btn);
this.tabDiv = tabBox.getElementsByTagName(Content);
for(var i=0; i<this.tabBtn.length ; i++){
this.tabBtn[i].index = i;
var _this = this;//this指向的是var tab = new Tab() ,即tab这个对象,注意是对象。
this.tabBtn[i].onclick = function () {
_this.clickBtn(this);//这句话里面的_this指向的是var tab = new Tab()构造函数这个对象,括号里面的this指向的点击事件对应的这个对象,这里的指的是input这个标签
};
}
}
Tab.prototype.clickBtn = function (btn) {
for(var k = 0;k<this.tabBtn.length;k++){
this.tabBtn[k].className = '';//clickBtn这个方法里面的this指向的是var tab = new Tab() ,即tab这个对象
this.tabDiv[k].style.display = 'none';
}
btn.className = 'active';
this.tabDiv[btn.index].style.display = 'block';
}