jQuery tab插件使用说明

实例一

jQuery tab插件结构：

代码如下

复制代码

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();
}); //点击切换
});
};
};

//调用方式：

代码如下	复制代码
$(".tabWrap").tabs({ tabList: ".tabBox li", //tab list tabContent: ".tabContent .tcon", //内容box tabOn:"on", //当前tab类名 action: "mouseover" //事件，mouseover或者click }); });

实例二

html代码

代码如下	复制代码
<div class="tab"> <ul class="tab-hd"><li>选项4</li><li>选项5</li><li>选项6</li></ul> <ul class="tab-bd"><li>内容4</li><li>内容5</li><li>内容6</li></ul> </div> <div class="tab"> <ul class="tab-hd"><li>选项4</li><li>选项5</li><li>选项6</li></ul> <ul class="tab-bd"><li>内容4</li><li>内容5</li><li>内容6</li></ul> </div>

css代码

代码如下	复制代码
ul,li{ list-style:none;} .tab{ width:450px; margin:0 auto 50px;} .tab-hd { background:#F93; overflow:hidden; zoom:1;} .tab-hd li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;} .tab-hd li.active{ background:#F60;} .tab-bd li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;}

jquery代码

代码如下

复制代码

$(function(){
function tabs(tabTit,on,tabCon){
   $(tabCon).each(function(){
      $(this).children().eq(0).show();
   });
$(tabTit).each(function(){
     $(this).children().eq(0).addClass(on);
});
$(tabTit).children().hover(function(){
        $(this).addClass(on).siblings().removeClass(on);
         var index = $(tabTit).children().index(this);
         $(tabCon).children().eq(index).show().siblings().hide();
    });
     }
tabs(".tab-hd","active",".tab-bd");
   });

补充：网页制作,jquery