tabs切换,实现起来对于稍微熟悉js或是jquery的朋友来说,非常的简单,但是对于刚入门学习js的同学来说,可能是一个必须要先解决的常见问题。先总结几种tabs切换技术,从菜鸟级别到普通水平
1. 纯菜鸟阶段,纯js实现,代码如下:
html 代码:
<ul class="tabs" id="tabs">
<li>
<div class="content1"></div>
</li>
<li>
<div class="content2"></div>
</li>
<li>
<div class="content3"></div>
</li>
</ul>
js代码:
var tabs_li=document.getElementById("tabs");
for(var i=0;i<3;i++){
tabs_li[i].style.className="";
tabs_li[i].children.style.display="none";
for(var j=0;j<3;j++){
tabs_li[j].οnclick=function(){
if(i==j)
this.style.className="active";
this.chileren.style.display="block";
}
}
}
2. 刚接触jQuery实现,jQ方法实现,代码如下:
html 代码:
<ul class="tabs" id="tabs">
<li>
<div class="content1"></div>
</li>
<li>
<div class="content2"></div>
</li>
<li>
<div class="content3"></div>
</li>
</ul>
js代码:
var tabs_li=$("#tabs");
for(var i=0;i<3;i++){
tabs_li[i].hide();
tabs_li[i].children().hide();
for(var j=0;j<3;j++){
tabs_li[j].οnclick=function(){
if(i==j)
$(this).addClass("active");
$(this).chileren().show();
}
}
}
3.jQuery使用得熟练一点以后,jQ方法实现,代码如下:
html代码:
<ul class="tabs" id="tabs">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div class="content" id="content">
<div class="content1 db"></div>
<div class="content2"></div>
<div class="content3"></div>
</div>
//.db{display:block}
js代码:
var $tabs=$("#tabs li");
var $content=$("$content div");
var index=0;
$tabs.click(function(){
index=$(this).index();
$(this).addClass("active").siblings().removeClass("active");
$content.eq(index).show().siblings().hide();
})
对于第3中方法,还可以再次改进,其js部分如下:
$("#tabs").find("li").each(function(n){ $(this).click(function(){ $(this).addClass("active").siblings().removeClass("active"); $("#content").find("div").eq(n).show().siblings().hide(); }) });
总结这几种方法:
1.方法1和方法2中HTML结构中tabs切换页与相应的内容content是写在一起的,方法3中的HTML结构中tabs切换页面与相应的内容content页面是分开的.......方法3中的结构更合理。
2.在内容切换上,方法3实现方法更简洁易懂。
个人一路走来小小总结,仅供自己总结用,激励自己写出更好更有效的代码,如对刚入行前端的朋友们有点借鉴作用,那更欣慰了,其他的就不奢求了。