<!DOCTYPE html> <html> <head> <title> initTab </title> <style> ul{ list-style: none ; padding:0px; width:440px; position:relative; } li{ display: inline-block; zoom:1; height: 35px; margin-right: 1px; width: 102px; } .tab_hover{background-color:#ccffee;} .tab_stable{background-color:#cccccc;} .tabSheet{ width: 412px; height:200px; border:1px solid silver; position:relative; } .hid{display:none;} .clear{clear:both;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> <ul id="tabHoder_id" class="clear"> <li class="tab_hover">tab A</li> <li class="tab_stable">tab B</li> <li class="tab_stable">tab C</li> <li class="tab_stable">tab D</li> </ul> <div class="tabSheet">sheet 0 </div> <div class="tabSheet hid">sheet 1 </div> <div class="tabSheet hid">sheet 2 </div> <div class="tabSheet hid">sheet 3 </div> <script> //函数定义 function tabInit(){ /* @author ecalf * @overview 用于快速初始化tab控件的函数，代码中使用了jquery 库，建议提供三个参数 arguments:tab,conf,callback * @param tab tab控件id或dom、jq对象,必选参数 * @param conf 标签样式及面板切换配置,可选参数 * @param callback 点击标签后的回调函数，可选参数 * * conf 参数格式为 {tabClass:['标签激活时的样式类','标签未激活时的样式类'], * sheets:[一组与标签对应的内容面板DOM/JQ对象], * eventType:'触发切换动作的事件，如果不提供则使用 click' * } * callback 函数的第一个参数为tab控件dom对象，第二个参数为被点击标签的序号(从0开始) * conf 和 callback 至少提供1个，如果 两个都提供，conf将成为callback函数的第三个参数, * 如果不提供conf参数或不提供匹配tab内容面板的conf.sheets数据，请在callback内处理行为逻辑 * 在callback内可以使用this直接访问被点击的标签的dom对象 * */ var tab,conf,callback,argsNum = arguments.length; if(argsNum<2){ throw new Error("at least 2 arguments needed for function 'tabInit'"); } while(argsNum--){ if(!argsNum){ tab = typeof(arguments[0])=="string"?$("#"+arguments[0]):$(arguments[0]); }else if(arguments[argsNum].constructor===Function){ callback = arguments[argsNum]; }else if(arguments[argsNum].constructor===Object){ conf = arguments[argsNum]; } } $(tab).children()[(!conf||conf.eventType)||'click'](function(){ // tab导航 if(conf&&$(this).attr("class")==conf.tabClass[0]){ return; } var curTabIndex = $(this).index(); //要求tab容器 的子元素都是 tab 切换按钮 if(conf&&conf.tabClass&&conf.tabClass.length){ $(this).siblings().removeClass(conf.tabClass[0]).addClass(conf.tabClass[1]); $(this).removeClass(conf.tabClass[1]).addClass(conf.tabClass[0]); } if(conf&&conf.sheets&&conf.sheets.length){ $.each(conf.sheets,function(i,v){ var sheet = $(typeof(conf.sheets[i])=="string"?"#"+conf.sheets[i]:conf.sheets[i]); if(i==curTabIndex){ sheet.show(); }else{ sheet.hide(); } }); } if(callback){ callback.apply(this,[tab,curTabIndex,conf]); } }); } // 用法: tabInit("tabHoder_id", {tabClass:['tab_hover','tab_stable'],sheets:$(".tabSheet"),eventType:"mouseover"}, function(){ arguments[2].sheets.eq(arguments[1]).html( $('<div></div>').html( "tabs 导航条ID："+[arguments[0].attr("id"), //回调函数第一个参数：tab 的 jquery 对象 "active 序号："+arguments[1], //回调函数第二个参数：激活的 tab 的序号 "配置参数--CSS类名："+arguments[2].tabClass.join(',') //回调函数第三个参数：conf ].join('<br />') ) ); }); </script> </body> </html>