开发中经常会遇到TAB选项卡：点击对应的选项卡，该选项卡为active状态，其余为未选中状态，同时显示对应的TAB内容。如下
以下为简化例子：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试TAB</title> <link href="CSS/style_right.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../js/jquery-1.11.3.js"></script> <script type="text/javascript" src="../js/tabFactory.js"></script> </head> <style type="text/css"> .active{background-color: #ccc;} </style> <body> <ul id="tabTitleUlId"> <li>title1</li> <li>title2</li> <li>title3</li> </ul> <ul id="tabContentUlId"> <li>content1</li> <li>content2</li> <li>content3</li> </ul> </body> </html>
编写一个通用的jQuery方法，以便以后方便使用
/* * *用途：将TAB选择卡设置效果。 *初始状态--title中的第一个title为选中效果，其余不是，content中第一个content显示，其余content隐藏 *使用效果： 点击或鼠标移至TAB选项卡的title，title的class为选中效果，其他title为非选中效果，title对应的content项显示，其他content隐藏 *使用前提：每一个title放在一个<ul>标签下的<li>标签中 每一个content放在另一个<ul>标签的<li>中 title的选中效果的class设置在li标签中 例如： <ul id="tabTitleUlId"> <li class="actived">title1</li> <li>title2</li> <li>title3</li> </ul> <ul id="tabContentUlId"> <li>content1</li> <li>content2</li> <li>content3</li> </ul> ********/ $(function(){ //定义jQurey新方法 用 $.newMethodName = function(a,b,c){...} 定义完后就可以用$.newMethodName(a,b,c)使用了 $.jqtab = function(tabTitleUlId , tabContentUlId , titleActiveClassName , actionName){ //首先把所有content隐藏 $("#"+tabContentUlId).find("li").hide(); //其次再把第一个content显示出来 //$("#"+tabContentUlId).find("li:first").show();同样效果 $("#"+tabContentUlId).find("li").first().show(); //把所有title都重置并把第一个li设置为active $("#" + tabTitleUlId).find("li").removeClass(titleActiveClassName); $("#" + tabTitleUlId).find("li:first").addClass(titleActiveClassName); $("#"+tabTitleUlId).children("li").bind(actionName , function(){ //点击后对应的title为选中状态，其他为非选中 $(this).addClass(titleActiveClassName).siblings("li").removeClass(titleActiveClassName); var index = $("#"+tabTitleUlId).children("li").index(this);//注意这里是this 不是$(this) $("#"+tabContentUlId).children("li").eq(index).show().siblings().hide(); }) } });
这个通用的方法有以下参数
tabTitleUlId:title的ul标签的id
tabContentUlId:content的ul标签的id
titleActiveClassName:title选中时的classname
actionName：触发事件的方式如"click"
使用方法也很简单：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试TAB</title> <link href="CSS/style_right.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../js/jquery-1.11.3.js"></script> <script type="text/javascript" src="../js/tabFactory.js"></script> </head> <style type="text/css"> .active{background-color: #ccc;} </style> <body> <ul id="tabTitleUlId"> <li>title1</li> <li>title2</li> <li>title3</li> </ul> <ul id="tabContentUlId"> <li>content1</li> <li>content2</li> <li>content3</li> </ul> <script type="text/javascript"> //直接调用新的JQuery方法 $(function(){ $.jqtab("tabTitleUlId" ,"tabContentUlId" ,"active" , "click" ) }); </script> </body> </html>