利用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
})

  

    
1
    
2
    
3
    
4
  
  

    
p1
    
p2
    
p3
    
p4
  

*{
  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;
}