[通用]jQuery之tab切换-学习篇 - Web前端

hi，先前写过一篇文章：[通用]jQuery下拉菜单-学习篇 今天接着介绍一下关于JQuery中tab的切换效果。在网页中我们经常看到很多的TAB切换效果，有的童鞋就要问了，如何定义一个通用的函数，让页面上所有的tab切换效果只需调用同一个函数来实现效果，针对这个问题先前在网上搜索了一些文章，都没具体的讲解出来，下面就是本人花了些时间总结出来的，分享给大家。

html代码和CSS样式，我就直接贴出来，如下：

HTML代码：

1. <div class="nav-tabbox">

2.  <ul id="tab-menu">

3.  <li class="on">双色球</li>

4.  <li>大乐透</li>

5.  <li>七星彩</li>

6.  </ul>

7.  <div id="nav-conbox">

8.  <div>双色球交易区</div>

9.  <div class="dis">大乐透球交易区</div>

10.  <div class="dis">七星彩交易区</div>

11.  </div>

12. </div>

css样式：

1. body,ul,li{font-size:12px;padding:0;margin:0;}

2. ol,li{list-style:none;}

3. .dis{display:none;}

4. .nav-tabbox{margin:30px auto;width:500px;border:solid #ccc 1px;}

5. #tab-menu{margin-top:10px;padding-left:10px;height:28px;border-bottom:solid #ddd 1px;}

6. #tab-menu li{float:left;width:60px;height:28px;line-height:28px;text-align:center;bottom:-1px;cursor:pointer;}

7. #tab-menu .on{border:solid #ddd;width:58px;border-width:1px 1px 0 1px;font-weight:bold;background:#fff;Cursor:default;}

8. #nav-conbox{padding:16px;}

jQuery代码：

下面具体看下jquery核心代码

1. <scripttype="text/javascript">

2. // navElementId为切换导航ul的id名称,navConId为切换内容的父级框架的id名称,status为tab选中后的样式名

3. function navTabClick(navElementId,navConId,status){    

4.  var navLi=$("#"+navElementId).children("li");

5.  navLi.click(function(){

6.  var navNum=navLi.index($(this));  //获取tab标签的索引值

7.  $(this).addClass("on").siblings().removeClass("on");  //点击tab后样式的变化
   

8.  //点击tab后相关内容的切换

9.  $("#"+navConId).children("div").eq(navNum).show().siblings().hide();    

10.  })

11. }

12. //函数调用

13. $(function(){

14. navTabClick("tab-menu","nav-conbox","on");  //三个变量名可修改
    

15. });

16. </script>
    

总结：有了上面的方法，我们在一个页面实现多个tab切换效果就易如反掌啦，调用方法如下：

1. $(function(){

2. navTabClick("tab-menu","nav-conbox","on");

3. navTabClick("tab-menu2","nav-conbox2","on2");
   

4. navTabClick("tab-menu3","nav-conbox3","on3");
   

5. ...
   

6. });

好吧，今天讲解大概就是这样了，如有建议或者疑问，请留言！ Demo实例>>

AD下，后面将写一篇关于文字和图片无缝滚动的文章，敬请关注。。。