为什么是DIY jquery选项卡接触jquery 2，3个月了，一直都未动手写过插件。正好最近比较闲，就打算把一直看不顺眼的项目中现有的标签改造一番（现有的标签未能做成一个控件，复制，过去的代码太多)。想着框架这么强大的库不可能没有制表符插件吧，赶紧搜了一下，哈，果然！框架选项卡！心里一阵窃喜，赶紧负荷下来用用吧。可查看了一下它的用法，才发现不太适用现有的项目耶，我们的标签每一个都对应着一个完整的页面，是用内联框架嵌入的。而框架选项卡似乎并没有支持内联框架哦。那就改造一下吧？得从头到尾研究它的代码吧，头疼！还不如自己写一个得了，正好练练手，哈哈。说干就干，由此便诞生了我的第一个框架插件代码。复制代码代码如下： /* * jquery.tab * Author:冬日小草*日期： 2010/12/07 */jquery。fn。tab=函数(选项){ var settings={ activetabscals : ' tab-selected '，defaulttabscals : ' tab-default '，tabContainer类： ' tab container '，tab panel cls 3360 ' tab panel '，mouseoverTabClass: null，hiddenabclass : ' tab-hide '，tabPanel: null，selectHandler:if(选项){ jQuery.extend(设置，选项);}//#地区公共活动$。fn。setactivetab=function(tabIndex){ if(tabIndex){ return this。每个(函数(){ this。setactivetab(tabIndex)；}) } };$ .fn。GetFrameBytabid=function(taBid){ if(taBid){ var iframeId=settings。iframeidPrex taBiD返回框架[IFrameid]；}返回null }；//#endregion公共事件返回这个。每个(函数(){ var ts=thisvar $ TabContainer=$(ts)；ts.activeTab=nullts。tabjectId=nullts.selectedTab=nullts。selectedindex=0；ts . iframeid=null//#区域“private”方法这个。setactivetab=function(tabIndex){ if(类型为(tabIndex)！=' number '){ return；} var selectedTab=$(' Li :可见'，$tabContainer).eq(tabIndex)；if(selectedtab。长度==0){ return；}//如果(ts。iframeid==设置。iframeidprex selectedtab。attr(' id ')，请单击活动选项卡{ return} else { if (ts.iframeId！=null) { //$(frames[activeTabId]).hide()；$(“iframe”).hide()；} } $('.'settings.activeTabClass，$tabContainer).移除CLaSS(设置。activity class)；ts.activeTab=selectedTabts。ActiveTab。AddClass(设置。ActiveTabClass)；var目标=ts。activetab。attr('目标')；如果(目标类型)!=' string '){ return；} ts。iframeid=设置。iframeidprex selectedtab。attr(' id ')；if ($('#' ts.iframeId).length==0){ var iframe=$(' iframe/iframe ')；iframe.attr('id '，ts.iframeId).attr('src '，目标)。css({ width: '100% '，height : ' 100% ' })；iframe。appendo(设置。选项卡面板)；} else { $(“#”ts . iframeid).show()；} };var初始tab=function(){ $ tab container。addclass(设置。tabcontainer类)；$(settings.tabPanel).添加CLaSS(设置。tab panel cls)；var stofloat div=$(' div/div ')；stopfoatdiv。CSS({ clear : ' both '，height: '0px' }).insertAfter($ tab容器)；$('li '，$tabContainer).每个（函数(I){ var $ tab=$(this)；var $link=$('a '，$ tab)；var href=$ link。attr(' href ')；$link.attr('href '，' # ')；$tab.attr('target '，href).添加CLaSS(设置。DefaultTabCLaSS).单击（函数{ ts。selectedtab=$ tabts。selectedindex=I；if(设置的类型。selecthandler)=' function '){ settings。selecthandler()；} else { ts。setactivetab(I)；} }) });};//#结束区域“私人”方法初始TABs()；ts。setactivetab(0)；//将第一个选项卡设置为默认活动。});};演示复制代码代码如下： html代码： ul id=' tab ' Li id=' tab blog ' a href=' blog。htm ' span博客园/span/a/Li Li id=' TabHome ' a href=' home。htm ' span首页/span/a/Li Li id=' TabManagEment ' a href=' ManagEment '。htm ' span管理/span/a/Li/ul div id=' Tabpanel '/div JavaScript代码： $(窗口).load(function(){ $(' # tab ').tab({ tab面板： ' # tab面板' })；})屏幕截图：

描述参数（可选)-可自定义标签的样式，触发标签的事件等。默认值如下：复制代码代码如下： var设置={ activetab class : ' tab-selected '，//css用于活动选项卡defaulttab类： ' tab-default '，//css用于非活动选项卡选项卡容器类： '选项卡容器'，//css用于选项卡容器tabPanelCls: ' tabPanel '，//css用于包含iframe mouseoverabclass : null的面板，//css用于将鼠标悬停在选项卡上时的选项卡};公共方法-setActiveTab(tabIndex)getFrameByTabId(tabId)复制代码代码如下： setAcitveTab:按标签索引设置活动标签$(' # tab ').setActiveTab(1)；//激活第二个选项卡。获取特定选项卡的框架$(' # tab ').getframebytapid(' Tabhome ')；//获取主页的框架。其他1。此标签用了三个数字正射影像图元素利亚斯潘，是因为为了兼容标签文字的任意大小，其背景用了三张图片，我用了里呈现左边的圆角图片，a呈现右边的圆角，而跨度则平铺中间的背景。其实用两个图片也可以实现，做一个很长的有左圆角的的背景图片和一个右圆角。但不管如何为了有圆角效果添加了这些无意义的元素，总是让人不爽。真是希望CSS3的圆角技术和一个数字正射影像图元素可设置多张背景图能到很好的支持。 2.此插件支持用户自定义切换标签事件(selectHandler)，以支持特殊需求，如某标签页验证不通过，不让切换等。用法：复制代码代码如下：美元(' # tab ').tab({ tabbpanel : ' # tabbpanel '，selecthandler : function(){ switch tab()；//您定义的函数。} });3.标签插件里活动选项卡，选择索引属性等是为了让用户自定义标签切换事件是能得到与标签相关的信息，可根据自己的需要扩展。用法：复制代码代码如下：美元(' # tab ').每个(function(){ var $ tab=this；var当前tabid=$ tab。activetab。attr(' id ')；//.}