快上网建站品牌

13518219792

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

 

  1.  
  2. ul,li,div{ margin:0; padding:0;}  
  3. ul,li{ list-style:none;}  
  4. .tabWrap{ width:450px; margin:0 auto 50px; overflow:hidden;}  
  5. .tab{ background:#F93; overflow:hidden; width:450px;}  
  6. .tab li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer; height:22px; line-height:22px;}  
  7. .tab li.on{background:#F60;}  
  8. .tabContent .p-content{ padding:20px; border:1px solid #ddd; border-top:0 none; }  
  9. .tabContent .hide{ display:none;}  
  10.  
  11.  
  12.      
  13.      
  14.          
  15.          
  16.             
  17. 选项卡1
    18.  
  18.             
  19. 选项卡2
    20.  
  20.             
  21. 选项卡3
    22.  
  22.          
  23.          
  24.             1111
 
  •             222
    •  
  •             3333
    •  
  •         
    •  
  •     
    •  
  •       
  •     
     
  •     
     
  •      
  •          
  •             
  • 选项卡1
    •  
  •             
  • 选项卡2
    •  
  •             
  • 选项卡3
    •  
  •          
  •          
  •             1111 
  •             222 
  •             3333 
  •          
  •      

    • 我这边HTML是用了两个一样的结构及样式  是为了测试js在一个页面上多次调用是否成功！JS代码如下：
     

    1.   
    2.     $(function(){  
    3.         function tabs(tabMenu,on,tabContent){  
    4.         $(tabContent).each(function(){  
    5.             $(this).children().eq(0).show();      
    6.         });   
    7.         $(tabMenu).each(function(){  
    8.             $(this).children().eq(0).addClass(on);    
    9.         });  
    10.         $(tabMenu).children().hover(function(){  
    11.             $(this).addClass(on).siblings().removeClass(on);  
    12.             var index = $(tabMenu).children().index(this);  
    13.             $(tabContent).children().eq(index).show().siblings().hide();      
    14.         });  
    15.     }  
    16.     tabs(".tab","on",".tabContent");  
    17. })  
    18.           
    19.      

    引用上面的js就可以了！为了更清晰 待会把源文件放在附件里面 随时可以下载看看！下面说说写这个页面的js一点思路！

    一 function tabs(tabMenu,on,tabContent){}  用这个函数来封装js 调用的方式是tabs(".tab","on",".tabContent"),其中tabMenu是指li外层ul on是指当鼠标移上去li 希望他有个背景 tabContent 是指content的外层！

    二 接着用each来遍历 找到第一个子元素li增加一个类on 第一个content让她们显示！接着当鼠标移到任何一个li时候 让当前的li增加一个类on 同辈元素删除类on  然后索引当前的li 看是第几个 最后找出content  如果他的索引值和li的索引值相同的话 显示内容 同辈元素隐藏掉！思路就这么简单！！！！

    附件：http://down.51cto.com/data/2359275

    本文题目：Jquery封装tab选项卡
    转载源于：http://csdahua.cn/article/gsehsh.html
    扫二维码与项目经理沟通

    我们在微信上24小时期待你的声音

    解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

    其他资讯

    行业动态

    企业网站建设的重要性！

    现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。...

    服务项目

    联系吧 在百度地图上找到我们

    电话：13518219792

    如遇占线或暂未接听请拨：136xxx98888

    业务咨询 技术咨询 售后服务
    网站制作
    绵阳网站制作
    成都网站制作
    成都网站制作公司
    网站制作
    网站建设
    重庆外贸网站建设
    营销型网站建设
    眉山网站建设
    成都免费网站建设公司
    网站设计
    温江网站设计
    网站设计
    成都网站设计
    响应式网站设计
    联系我们
    电话：13518219792
    邮箱：631063699@qq.com
    地址：成都青羊区锦天国际1002号
    网址：www.csdahua.cn

    微信二维码

    Copyright © 2002-2023 www.csdahua.cn 快上网建站品牌 QQ：244261566 版权所有 备案号：蜀ICP备19037934号