Tab 组件

2019-07-18 本文已影响0人 kzc爱吃梨

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

Tab 组件

HTML

CSS

猜你喜欢

热点阅读