Jquery封装tab选项卡

tab选项卡在网上是很常见的一种效果网站当中随处可见特别是大型网站到处都是，但是写tab这种效果用的方式可能不一样有的是YUI写的用的是用KISSY写的有的是用原审js写的也有的是以Jquery框架写的但是我这里是用Jquery来封装tab选项卡的在js中我用了Jquery中的children()这个方法获取父类中直接子元素，记住一定是直接子元素假入说要获取子元素的div当中的a标签比如这样获取 $("父类").children("div a");想获取a标签是获取不到的只能获取到div标签！！我以前做页面时候就碰到过这种情况！OK 其实用Jquery来封装tab选项卡是非常简单的一件事情！只要几行代码就ok了！下面是我的HTML结构及CSS

创新互联公司从2013年开始，是专业互联网技术服务公司，拥有项目做网站、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元荣成做网站,已为上家服务,为荣成各地企业和个人服务,联系电话:18982081108

 
ul,li,div{ margin:0; padding:0;}  
ul,li{ list-style:none;}  
.tabWrap{ width:450px; margin:0 auto 50px; overflow:hidden;}  
.tab{ background:#F93; overflow:hidden; width:450px;}  
.tab li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer; height:22px; line-height:22px;}  
.tab li.on{background:#F60;}  
.tabContent .p-content{ padding:20px; border:1px solid #ddd; border-top:0 none; }  
.tabContent .hide{ display:none;}  
 
 
     
     
         
         
            
选项卡1
             
选项卡2
             
选项卡3
          
         
            1111

222

$(function(){
function tabs(tabMenu,on,tabContent){
$(tabContent).each(function(){
$(this).children().eq(0).show();
});
$(tabMenu).each(function(){
$(this).children().eq(0).addClass(on);
});
$(tabMenu).children().hover(function(){
$(this).addClass(on).siblings().removeClass(on);
var index = $(tabMenu).children().index(this);
$(tabContent).children().eq(index).show().siblings().hide();
});
}
tabs(".tab","on",".tabContent");
})

大橙子网站建设，新征程启航

Jquery封装tab选项卡

其他资讯