文章目录
一、使用面向对象写一个选项卡
1.1 先用面向过程写一个选项卡
在使用面向对象写一个选项卡的时候，我们还是先用面向过程来写一个选项卡，如下：
<body>
<div id="div1">
<input class="active" type="button" value="A">
<input type="button" value="B">
<input type="button" value="C">
<div style="display: block;">AAAAA</div>
<div>BBBBB</div>
<div>CCCCC</div>
</div>
</body>
<style>
#div1>input{background: white;}
#div1 input.active{
background: yellow;
}
#div1 div{
width: 200px;
height: 200px;
background-color: #CCC;
display: none;
}
</style>
<script>
window.onload=function(){
var oDiv = document.getElementById('div1');
var btn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
for(var i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].onclick=function(){
for(var j=0;j<btn.length;j++){
btn[j].className='';
aDiv[j].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
}
}
}
</script>
一个i简单的选项卡就完成了
效果：
1.2 正式开始使用面向对象写一个选项卡
现在我们开始来改造这个函数，使其成为面向对象的选项卡。
我们需要明确目标，需要做到以下几个步骤：
- 不能有函数嵌套 (因为有的话，那么就没有必要了)
- 把window.onload 换成我们熟悉的对象(构造函数)
- 把零散的变量全部变为对象的属性
- 把函数变为对象的方法
1.2.1、解决函数嵌套
我们只需要把内部的函数提到外边来，再在里边调用即可：
需要注意的是： 由于我们把函数提到外边，因此我们在window.onload里边定义的变量就无法使用了，所以我们要把window.onload里边的变量提升为全局变量，方法也很简单，我们在外边定义即可。
<script>
var aDiv=null;
var btn = null;
window.onload=function(){
var oDiv = document.getElementById('div1');
btn = oDiv.getElementsByTagName('input');
aDiv = oDiv.getElementsByTagName('div');
for(var i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].onclick=fnClick;
}
}
function fnClick(){
for(var j=0;j<btn.length;j++){
btn[j].className='';
aDiv[j].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
}
</script>
改动过后，运行一下。程序没报错，Perfect
1.2.2 pass掉window.onload
这里顺便加了一个id，目的是方便通用；
<script>
var aDiv=null;
var btn = null;
function TabSwitch(id){
var oDiv = document.getElementById(id);
btn = oDiv.getElementsByTagName('input');
aDiv = oDiv.getElementsByTagName('div');
for(var i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].onclick=fnClick;
}
}
function fnClick(){
for(var j=0;j<btn.length;j++){
btn[j].className='';
aDiv[j].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
}
</script>
1.2.3 把变量作为属性 函数变为方法 并且改错 、传参、闭包
<script>
window.onload=function(){
new TabSwitch('div1');
}
function TabSwitch(id){
var _this = this;
var oDiv = document.getElementById(id);
this.btn = oDiv.getElementsByTagName('input');
this.aDiv = oDiv.getElementsByTagName('div');
for(var i=0;i<this.btn.length;i++){
this.btn[i].index=i;
this.btn[i].onclick=function(){
_this.fnClick(this);
};
}
}
TabSwitch.prototype.fnClick=function (btn){
for(var j=0;j<this.btn.length;j++){
this.btn[j].className='';
this.aDiv[j].style.display='none';
}
btn.className='active';
this.aDiv[btn.index].style.display='block';
}
</script>
博客到这里也就结束了，其中有什么不懂的地方可以留言或者私信，笔者看到过后都会第一时间回复的。
如果你觉的还不错的话，请点赞支持一下！