Tab切换5种方法

最新推荐文章于 2023-11-03 20:27:59 发布

MR_Teen

最新推荐文章于 2023-11-03 20:27:59 发布

阅读量7.4k

点赞数 3

分类专栏： web前端

web前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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

李老师用了三天的时间把Tab切换的效果讲给我们，感觉从中学到了很多很多，李老师的讲课一如既往的棒，从他身上学的的不仅仅是技术，更多的是思想。

通过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关键字的原因，这种方法精髓在于随意复用，不用传参。

MR_Teen

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Tab切换5种方法

原文：http://zhanfeng.blog.51cto.com/6109904/1017901李老师用了三天的时间把Tab切换的效果讲给我们，感觉从中学到了很多很多，李老师的讲课一如既往的棒，从他身上学的的不仅仅是技术，更多的是思想。通过Tab切换我们学到：函数，数组，for循环，if语句，this关键字。其中this关键字是最重要的，this关键字第一层含义就是指向当前对象。
复制链接

扫一扫