tab选项卡插件

<style>
*{margin:0;padding:0;}
ul,li{list-style-type: none;}
.cj-tab {
background: #f3f3f3;
width:400px;
}
.tab {
height:46px;
line-height:46px;
background: goldenrod;
}
.tab li {
float:left;
padding:0 10px;
}
.tab li.on{
background:darkred
}
.t-con {
padding:10px;
}
.t-con div {display: none;}

</style>

<div id="cj-tab" class="cj-tab">
<ul class="tab">
<li class="on">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
<div class="t-con">
<div style="display: block;">内容1</div>
<div>内容2</div>
<div>内容3</div>
<div>内容4</div>
</div>
</div>

JS调用

$(function(){
$("#cj-tab").TabJohn();
})

JS代码

(function($){
$.fn.TabJohn = function(J){
J = $.extend({
index : 0,         
tarrget : "click", 
tab : ".tab",
tabli : "li",
con : ".t-con",
condiv : "div",
cur: "on",
speed : "dowm"
},J);
/*插件声明结束*/

var obj = $(this),
tab = obj.find(J.tab),
con = obj.find(J.con),
tabli = tab.children(J.tabli),
condiv = con.children(J.condiv)

tabli.each(function(){
var T = $(this);
var I = T.index();
if(I == J.index){
T.addClass(J.cur);
}
T.on(J.tarrget,function(){
T.addClass(J.cur).siblings(J.tabli).removeClass(J.cur);
speed(I);
})
})



condiv.each(function(){
var T = $(this);
var I = T.index();
if (I!=J.index){
T.hide();
}
})

function speed(I){
switch(J.speed){
case 'dowm' :
condiv.stop().eq(I).slideDown(500).siblings().slideUp(500);
break;
case 'left' :
condiv.eq(I).fadeIn(200).siblings().hide();
break;
default :
condiv.eq(I).show().siblings().hide()
}
}

}
})(jQuery)

转自FungLeo's Blog