清遠大學城網(wǎng)（http://www.qydxc.com）
tab選項卡在實際應用中幾乎到處可見，像現(xiàn)在大型網(wǎng)站163，QQ，新浪，淘寶都使用了tab選項卡效果，下面我來介紹一款jQuery tab選項卡插件. jQuery tab插件 結構：代碼如下復制代碼<div class="tabWrap"> <ul class="tabBox"> <li><a href="#nogo">tab1 </a></li> <li><a href="#nogo">tab2 </a></li> <li><a href="#nogo">tab3 </a></li> <li><a href="#nogo">tab4 </a></li> <li><a href="#nogo">tab5 </a></li> </ul> <div class="tabContent"> <div class="tcon">1111</div> <div class="tcon">2222</div> <div class="tcon">3333</div> <div class="tcon">4444</div> <div class="tcon">5555</div> </div> </div> jQuery tab插件 插件代碼：代碼如下復制代碼$(function () { $.fn.tabs = function (options) { var settings = { tabList: "", tabContent: "", tabOn:"", action: "" }; var _this = $(this); if (options) $.extend(settings, options); _this.find(settings.tabContent).eq(0).show(); //第一欄目顯示 _this.find(settings.tabList).eq(0).addClass(settings.tabOn); if (settings.action == "mouseover") { _this.find(settings.tabList).each(function (i) { $(this).mouseover(function () { $(this).addClass(settings.tabOn).siblings().removeClass(settings.tabOn); var _tCon = _this.find(settings.tabContent).eq(i); _tCon.show().siblings().hide(); }); //滑過切換 }); } else if (settings.action == "click") { _this.find(settings.tabList).each(function (i) { $(this).click(function () { $(this).addClass(settings.tabOn).siblings().removeClass(settings.tabOn); var _tCon = _this.find(settings.tabContent).eq(i); _tCon.show().siblings().hide(); }); //點擊切換 }); }; }; //調(diào)用方式： $(".tabWrap").tabs({ tabList: ".tabBox li", //tab list tabContent: ".tabContent .tcon", //內(nèi)容box tabOn:"on", //當前tab類名 action: "mouseover" //事件，mouseover或者click }); });

?

轉載于:https://www.cnblogs.com/wenson/p/3322420.html

總結

以上是生活随笔為你收集整理的漂亮的jQuery tab选项卡插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。