• 今天的任務(wù)是，利用jQuery和原生JS來實現(xiàn)一個簡單的tab切換
  jqueryTab預(yù)覽
• 思路
  1.首先確定HTML的結(jié)構(gòu)
  2.確定基礎(chǔ)的CSS樣式
  3.JS的思路
  • 行為與樣式的分離，通過添加與移除active類來實現(xiàn)
  • 需要使用的事件與屬性操作方法，例如$(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;
}