<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding:0;
}
#xuanxiangka {
position: relative;
width: 400px;
margin:50px auto;
border:1px solid #f00;
}
.tab {
font-size:0;
}
.tab span {
display: inline-block;
width:100px;
height:30px;
line-height: 30px;
text-align: center;
font-size:20px;
background: #ccc;
}
.tab span.on {
background: #f00;
color:#fff;
}
.content p{
display: none;
position: absolute;
top:35px;
left:0;
width:100%;
height:200px;
background: #f34;
}
.content p.on {
display: block;
}
</style>
</head>
<body>
<div id="xuanxiangka">
<div class="tab">
<span class='on'>按钮1</span>
<span>按钮2</span>
<span>按钮3</span>
<span>按钮4</span>
</div>
<div class="content">
<p class='on'>内容1内容1内容1内容1内容1</p>
<p>内容2内容1内容1内容1内容1</p>
<p>内容3内容1内容1内容1内容1</p>
<p>内容4内容1内容1内容1内容1</p>
</div>
</div>
<script>
/*
普通写法:
面向过程写法:
优点: 好理解
缺点: 扩展性很差
*/
var oXXK = document.getElementById('xuanxiangka');
var tabList = oXXK.querySelectorAll('.tab span');
var pList = oXXK.querySelectorAll('.content p');
// var index = 0;
// var length = tabList.length;
// for(var i = 0; i < length; i++) {
// tabList[i].index = i;
// tabList[i].addEventListener('click',function(){
// tabList[index].className = pList[index].className = '';
// index = this.index;
// tabList[index].className = pList[index].className = 'on';
// });
// }
/*
用面向对象写选项卡:
优点:
扩展性强
缺点:
难理解
以对象和核心,
通过对象调用属性和方法来实现功能
1.构造函数
2.原型
3.this指向(call,apply,bind配合)
*/
//选项卡的构造函数
function TabCtrl() {
//tab按钮
this.tabList = tabList;
//内容区块
this.pList = pList;
//上一个按钮的索引
this.index = 0;
}
//原型上添加单击方法
TabCtrl.prototype.tabClick = function(){
var _this = this;//保存实例化出来对象的this
for(var i = 0; i < this.tabList.length; i++) {
this.tabList[i].index = i;
this.tabList[i].addEventListener('click',function(){
_this.tabList[_this.index].className =
_this.pList[_this.index].className = '';
_this.index = this.index;
_this.tabList[_this.index].className =
_this.pList[_this.index].className ='on';
});
}
};
new TabCtrl().tabClick();
</script>
</body>
</html>
image.png
