Tab 组件

HTML

  
    
    
    


  

    

      
tab1
      
tab2
      
tab3
    
    
内容1
    
内容2
    
内容3
  
  
  

    

      
tab1
      
tab2
      
tab3
    
    
内容1
    
内容2
    
内容3
  
  

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))