6种tab选项卡切换方式,你值得拥有

时间:2021-01-08 06:28:39

原文:http://zhanfeng.blog.51cto.com/6109904/1017901

通过Tab切换我们学到:函数,数组,for循环,if语句,this关键字。其中this关键字是最重要的,this关键字第一层含义就是指向当前对象。下面我就总结一下this关键字:

<script type="text/javascript"> 

var lis;

function test1(){

  Alert(
this)

}

function test2(){

  lis
=document.getElementsByTagName("li");

  
for(var i=0;i<lis.length;i++){

    lis[i].onclick
=test1;

  }

}

</script>

 

当点击第一和第三个li时候弹出来的是window对象,当点击第二个li时候弹出来的是html对象。这样我们就很清晰的理解this关键字到底是指向什么,this就是指向它的当前对象第一个和第三个的当前对象是li,第二个的当前对象是window。

下面来说一下5种方法吧!!

第一种方法:最笨的,代码量也是最多,但是是最容易理解的!主要代码如下:

<script type="text/javascript"> 
function changeTab1(){
var li1=document.getElementById("li1");
var li2=document.getElementById("li2");
var li3=document.getElementById("li3");
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var div3=document.getElementById("div3");
li1.className
="sp";
li2.className
="";
li3.className
="";
div1.className
="sp";
div2.className
="";
div3.className
="";
}
</script>
<body>
<ul>
<li class="sp" id="li1" onclick="changeTab1()"><a href="#">页面一</a></li>
<li id="li2" onclick="changeTab2()"><a href="#">页面二</a></li>
<li id="li3" onclick="changeTab3()"><a href="#">页面三</a></li>
</ul>
<div class="sp" id="div1">内容一</div>
<div id="div2">内容二</div>
<div id="div3">内容三</div>
</body>

它主要是写了三个function方法每一个方法对应一个li,通过点击li来调用每个方法。这种方法没什么好说的很好理解。

第二种方法是函数中有关键字,只需要建一个函数就可以,这种方法比上一种前进了一大步,有种进入了工业革命的感觉!代码如下:

<script type="text/javascript"> 
function changeTab(a,b,c){
var lia=document.getElementById("li"+a);
var lib=document.getElementById("li"+b);
var lic=document.getElementById("li"+c);
var diva=document.getElementById("div"+a);
var divb=document.getElementById("div"+b);
var divc=document.getElementById("div"+c);
lia.className
="sp";
lib.className
="";
lic.className
="";
diva.className
="sp";
divb.className
="";
divc.className
="";
}
</script>
<body>
<ul>
<li id="li1" class="sp" onclick="changeTab(1,2,3)"><a href="#">页面一</a></li>
<li id="li2" onclick="changeTab(2,1,3)"><a href="#">页面二</a></li>
<li id="li3" onclick="changeTab(3,1,2)"><a href="#">页面三</a></li>
</ul>
<div class="sp" id="div1">内容一</div>
<div id="div2">内容二</div>
<div id="div3">内容三</div>
</body>

这个方法实现了一个函数可以解决问题,是跨进了一大步啊,这个方法没什么难得,主要是函数里面有了参数,通过参数来改变每次调用函数的不同意义。

第三种方法就是只传一个参数,这个方法只是第二种方法的改进,看一下代码吧!没什么可说的:

<script type="text/javascript"> 
function changeTab(a){
var li1=document.getElementById("li1");
var li2=document.getElementById("li2");
var li3=document.getElementById("li3");
var lia=document.getElementById("li"+a);
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var div3=document.getElementById("div3");
var diva=document.getElementById("div"+a);
li1.className
="";
li2.className
="";
li3.className
="";
lia.className
="sp";
div1.className
="";
div2.className
="";
div3.className
="";
diva.className
="sp";
}
</script>
</head>
<body>
<ul>
<li id="li1" class="sp" onclick="changeTab(1)"><a href="#">页面一</a></li>
<li id="li2" onclick="changeTab(2)"><a href="#">页面二</a></li>
<li id="li3" onclick="changeTab(3)"><a href="#">页面三</a></li>
</ul>
<div class="sp" id="div1">内容一</div>
<div id="div2">内容二</div>
<div id="div3">内容三</div>
</body>

第四种方法:使用了for循环和关键字this,大量的减少了代码,提高了程序的复用,快要完美了,有种第二次工业革命哦!看看代码是如何的精简:

<script type="text/javascript"> 
function changeTab(a){
var lis=document.getElementsByTagName("li");
var divs=document.getElementsByTagName("div");
for(var i=0;i<lis.length;i++){
if(lis[i]==a){
lis[i].className
="sp";
divs[i].className
="sp";
}
else{
lis[i].className
="";
divs[i].className
="";
}
}
}
</script>
</head>
<body>
<ul>
<li id="li1" class="sp" onclick="changeTab(this)"><a href="#">页面一</a></li>
<li id="li2" onclick="changeTab(this)"><a href="#">页面二</a></li>
<li id="li3" onclick="changeTab(this)"><a href="#">页面三</a></li>
</ul>
<div class="sp" id="div1">内容一</div>
<div id="div2">内容二</div>
<div id="div3">内容三</div>
</body>

代码很简洁有木有啊!这个方法还是需要传参,不过调用函数的时候直接用this就可以了这个好像跨出了又一大步 啊。这个方法的精髓我感觉就在于this关键字和for循环的使用使程序的复用性大大地提高了,思想就是每次循环和传进的参数比较来改变实现的。

第五种方法:for循环,this关键字提升,使程序无限复用,是最完美的一版,有点进入共产主义了啊。

<script type="text/javascript"> 
var lis;
function changeTab(){
var divs=document.getElementsByTagName("div");
for(var i=0;i<lis.length;i++){
if(lis[i]==this){
lis[i].className
="sp";
divs[i].className
="sp";
}
else{
lis[i].className
="";
divs[i].className
="";
}
}
}
function test(){
lis
=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick
=changeTab;
}
}
</script>
</head>
<body onload="test()">
<ul>
<li class="sp"><a href="#">页面一</a></li>
<li><a href="#">页面二</a></li>
<li><a href="#">页面三</a></li>
</ul>
<div class="sp">内容一</div>
<div>内容二</div>
<div>内容三</div>
</body>

这种方法最大的亮点是你看不到li中调用函数了,其实在body中调用了,通过调用test函数来实现了每个li对changeTab的调用,但是只要当点击li的时候才会调用changeTab,changeTab函数中if语句中比较的对象直接就是this,这个this就是代表每个li,这也是开始先讲this关键字的原因,这种方法精髓在于随意复用,不用传参。