html tab与jQuery,jQuery tab选项卡插件(可多次使用) | 编程知识库

这个纯js封装的tab选项卡

html代码

• 选项4
• 选项5
• 选项6

• 内容4
• 内容5
• 内容6

• 选项4
• 选项5
• 选项6

• 内容4
• 内容5
• 内容6

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;}

$(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");

});