本文实例讲述了框架插件实现标签栏切换功能。分享给大家供大家参考，具体如下：

效果：

核心代码：自己写了一个方法，需要用的时候直接调用就可以了。

方法如下：

（函数($) { //给$的【数学】函数添加方法$ .fn。tab=函数（选项){/* { tab head : ' tab-menuli '，tabHeadsClass: ' active '，tab body 3360 ' tab-maindiv '，tab body sclass : ' selected ' } */* * * @ param选项对象* @ param options.tabHeads:上面的里标签* @ param选项。tabbheadsclass : Li标签需要添加的类名* @ param选项。拉环主体3360下面四个内容盒子* @ param选项。tab body :下面四个内容盒子需要添加的类名*///将【数学】函数这个对象存起来，代码结束的时候让它返回var $ bigDiv=this//1。给页签们添加点击事件$(options.tabHeads).on('click '，function () { //2 .给被点击的里标签添加类，给其它兄弟标签移除这个类$(这个)。添加CLaSS(选项。TabheadCLaSS ).兄弟姐妹()。移除CLaSS(选项。tabbheadclash)；//3.获取当前点击的标签的索引var idx=$(this).index()；//4.从下面差异里面找到和索引文件相同的索引，给它添加类，其它兄弟页面移除这个类$(options.tabBodys).情商.addClass(options.tabBodysClass).兄弟姐妹()。移除类(选项。tabbodysclass)})返回$ bigDiv}}(jQuery))代码结构：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net jQuery选项卡切换/title style * { margin : 0；padd : 0；} ul { list-style :无；} .选项卡{宽度： 400px高度： 50px背景# cccmargin: 100px自动；} .tab-body {宽度： 400 px高： 398pxborder: 1px固体# ccc}。选项卡。项目{显示：无；左填充left: 30px}。tab-head li {左侧浮动：宽度： 100像素；高度： 50px文本对齐：中心；线高： 50px光标：指针；} /*让下方的内容显示*/.项目。选定的{显示器： }块；} /*让上方里标签改变颜色*/.活动{底色：热粉色；}/style/head dydiv class=' tab ' ul class=' tab-head ' Li class=' active '页签1/李莉页签2/李莉页签3/李莉页签4/Li/ul div class=' tab-body ' div class='所选项目p内容1/p p内容1/p p内容1/p p内容1/p/div类=“项目”p内容2/p p内容2/p p内容2/p p内容2/p/div class=' item ' p内容3/p p内容3/p p内容3/p p内容3/p /div类别='项目p内容4/p p内容4/p p内容4/p p内容4/p /div /div /div！- jq代码实现过程-脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/脚本！- //引入自己写的方法-脚本src=' http : jquery-tab。js//script script $(function(){//先自己写一个jQuery-选项卡方法（相当于射流研究…插件) //调用自己写的方法$(“# wrapper”).制表符({ tabHeads: ' .tab-headli '，tabHeadsClass: '激活，tabBodys: ' .tab-bodydiv '，tab body sclass : ' selected ' })})脚本/正文/html感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery页面元素操作技巧汇总》 、 《jQuery常见事件用法与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。