利用jquery实现一个简单的tab切换

• 今天的任务是，利用jQuery和原生JS来实现一个简单的tab切换
  jqueryTab预览
• 思路
  1.首先确定HTML的结构
  2.确定基础的CSS样式
  3.JS的思路
  • 行为与样式的分离，通过添加与移除active类来实现
  • 需要使用的事件与属性操作方法，例如$(this) siblings() parents() addClass()等

$('.tab').on('click',function(){
  $(this).addClass('active').siblings().removeClass('active')//给当前点击元素添加active，移除兄弟元素的active
  $(this).parents('.box')
  .find('.panel')
  .eq($(this).index())
  .addClass('active')
  .siblings()
  .removeClass('active')//利用当前tab的index值寻找父元素下index值相同的panel并添加active，移除其他panel 的active
})

<div class="box">
  <div class="header clearfix">
    <div class="tab active">1</div>
    <div class="tab">2</div>
    <div class="tab">3</div>
    <div class="tab">4</div>
  </div>
  <div class="cont">
    <div class="panel active">p1</div>
    <div class="panel">p2</div>
    <div class="panel">p3</div>
    <div class="panel">p4</div>
  </div>
</div>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.clearfix::after{
  content:'';
  display:block;
  clear:both;
}
.box{
  margin-left:30px;
  margin-bottom:20px;
}

.tab{
  float:left;
  padding:5px 20px;
  background:skyblue;
  border-top:1px solid;
  border-left:1px solid;
}

.tab.active{
  background:white;
}
.tab:last-child{
  border-right: 1px solid ;
}
.cont{
  width:250px;
  height:200px;
  background:pink;
  border:1px solid;
}
.panel{
  display:none;
  background:pink;
}
.panel.active{
  display:block;
}