×

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

作者:Terry2013.02.19来源:Web前端之家浏览:17808评论:0
关键词:JQuerytab切换

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. <script type="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下,后面将写一篇关于文字和图片无缝滚动的文章,敬请关注。。。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/jQuery-tabQh.html

网友评论文明上网理性发言已有0人参与

发表评论: