tab选项卡切换实例代码:
选项卡效果在网页中有大量的应用,当然在网上也有大量的实例,本章节就分享一个此类的选项卡效果,并且介绍一下它的实现过程,希望能够给需要的朋友或者想知道实现原理的朋友带来一定的帮助。
实例代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>CSS教程-蚂蚁部落</title> <style type="text/css"> li { border:1px solid #b5e2f3; border-bottom:0px; float:left; width:100px; height:25px; margin:0 7px; background:#F1FEF3; padding:9px 0 0 0; text-align:center; color:#33a3dc; cursor:pointer; } ul { width:800; height:36px; border-bottom:1px solid #b5e2f3; list-style:none; } #selected { background:#FFF!important; border-bottom:2px solid #FFF!important; } ul{margin:-1px;} #cate1, #cate2, #cate3, #cate4, #cate5 { clear:both; height:300px; background:#FFFFFF; width:800px; height:100px; padding:25px; border:1px solid #b5e2f3; } </style> <script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> var tab=function(tabId,activeId){ $("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){ $("#"+$("#"+activeId).attr("tar")).css("display","none"); $("#"+activeId).removeAttr("id"); $(this).attr("id",activeId); $("#"+$(this).attr("tar")).css("display","block"); }) } $(document).ready(function(){ tab("tab","selected"); }) </script> </head> <body> <div id="tab"> <ul> <li tar="cate1" id="selected">标题一</li> <li tar="cate2">标题二</li> <li tar="cate3">标题三</li> <li tar="cate4">标题四</li> </ul> </div> <div> <div id="cate1" style="display:block;">蚂蚁部落一</div> <div id="cate2" style="display:none;">蚂蚁部落二</div> <div id="cate3" style="display:none;">蚂蚁部落三</div> <div id="cate4" style="display:none;">蚂蚁部落四</div> </div> </body> </html>
以上代码实现了简单的选项卡切换效果,实现的过程也比较简单,下面做一下简单的介绍。
一.实现原理:
原理很简单,在默认状态下,tab元素下的第一个li元素具有id属性属性,通过此属性设置了它的样式状态,同时选项卡内容部分,第一个li是出于现实状态的,其他处于隐藏状态。然后为tab元素下id属性值不为selectd的li元素注册click事件处理函数,当点击这些li元素的时候,能够将当前显示的内容部分隐藏,同时移除之前选中标题li的id属性,然后设置当前被点击li的id属性值,同时将相应的内容li显示。原理大体如此,感觉介绍的比较混乱,最好参阅代码注释,自己分析理解。
二.代码注释:
1.var tab=function(tabId,activeId){},此函数用来进行切换处理,具有两个参数,第一个参数是标题li的容器元素id,第二个参数是当前被选中标题li的id属性值。
2.$("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){}),就本特效而言,是为tab元素下的id属性值不为selectedli元素注册click事件处理函数。
3.$("#"+$("#"+activeId).attr("tar")).css("display","none"),将上一个显示的内容li隐藏。
4.$("#"+activeId).removeAttr("id"),将上一个显示的标题li中的id属性值移除。
5.$(this).attr("id",activeId),设置当前显示的标题li的id属性值。
6.$("#"+$(this).attr("tar")).css("display","block"),对应的内容li设置为显示状态。
三.相关阅读:
1.delegate可以参阅jQuery的delegate()方法一章节。
2.not选择器可以参阅jQuery的:not选择器一章节。
3.attr()函数可以参阅jQuery的attr()方法一章节。
4.removeAttr()函数可以参阅jQuery的removeAttr()方法一章节。
5.css()函数可以参阅jQuery的css()方法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9526
更多内容可以参阅:http://www.softwhy.com/jquery/