HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title> Tab 组件</title>
</head>
<body>
<div class="mod-tab">
<ul class="tabs clearfix">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="panel active">内容1</div>
<div class="panel">内容2</div>
<div class="panel">内容3</div>
</div>
<div class="mod-tab">
<ul class="tabs clearfix">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="panel active">内容1</div>
<div class="panel">内容2</div>
<div class="panel">内容3</div>
</div>
</body>
</html>
CSS
.mod-tab{
border: 1px solid;
margin-top: 10px;
width: 302px;
}
.mod-tab ul,
.mod-tab li {
margin: 0;
padding: 0;
list-style: none;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
.mod-tab .tabs li{
float: left;
height: 30px;
width: 100px;
line-height: 30px;
text-align: center;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.mod-tab .tabs li:last-child {
border-right: none;
}
.mod-tab .tabs .active {
background: #eee;
}
.mod-tab .panel{
display: none;
height: 180px;
padding: 20px;
}
.mod-tab .active {
display: block;
}
JavaScript
function Tab(ct){
this.ct = ct
this.tabCt = this.ct.find('.tabs')
this.tabNodes = this.ct.find('.tabs>li')
this.panelNodes = this.ct.find('.panel')
this.bind()
}
Tab.prototype = {
bind: function(){
var _this = this
this.tabNodes.on('click', function(){
// 设index为当前点击
var index = $(this).index()
$(this).addClass("active").siblings()
.removeClass("active");
// 点击添加样式利用siblings清除其他兄弟节点样式
_this.panelNodes.eq($(this).index())
.addClass("active").siblings().removeClass("active")
})
}
}
var a = new Tab($('.mod-tab').eq(0))
var b = new Tab($('.mod-tab').eq(1))
网友评论