- 今天的任务是，利用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;
}
USharing