简单的封装tab选项卡
//tab
//参数1：整体选项卡
//参数2：交互的btn
//参数3：要展现的内容
//参数4：交互的btn当前状态
//参数5：事件类型
function tabs(obj, nav, cont, cur, type){
var c = cont;
var obj = $(obj),
nav = $(nav,obj),
cont = $(cont,obj);
nav.first().addClass(cur);
cont.first().show();
nav.each(function(index) {
$(this).bind(type,function(){
nav.removeClass(cur);
$(this).addClass(cur);
cont.hide();
cont.eq(index).show();
});
});
}
tabs(".tab", ".tab-nav li", ".tab-item", "on", "click");
html 代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tab-item{
100px;
height: 100px;
background: #000;
display: none;
color: #fff
}
.tab-nav{
}
.tab-nav li{
float: left;
20px;
margin:10px;
height: 20px;
background: #ccc;
list-style: none;
}
.tab-nav li.on{
background: red;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-item">1</div>
<div class="tab-item">2</div>
<div class="tab-item">3</div>
<ol class="tab-nav">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
</body>
</html>
很简单的选项卡效果，以后可以继续优化