付费节点推荐

免费节点

节点使用教程

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

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

<div class="nav-tabbox">

 <ul id="tab-menu">

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

 <li>大乐透</li>

 <li>七星彩</li>

 </ul>

 <div id="nav-conbox">

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

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

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

 </div>

</div>

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

ol,li{list-style:none;}

.dis{display:none;}

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

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

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

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

#nav-conbox{padding:16px;}

下面具体看下jQuery核心代码

<script type="text/javascript">

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

function navTabClick(navElementId,navConId,status){    

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

 navLi.click(function(){

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

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

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

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

 })

}

//函数调用

$(function(){

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

});

</script>

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

$(function(){

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

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

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

...

});

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

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

该文章由WP-AutoPost插件自动采集发布

原文地址:http://www.jiangweishan.com/article/jQuery-tabQh.html

未经允许不得转载：Bcoder资源网 » [通用]jQuery之tab切换-学习篇

相关推荐