<style>
.tab{
width: 100%;
height: 44px;
background: #fff;
font-weight: bold;
font-size: 14px;
color: #333;
text-align: center;
line-height: 20px;
position: fixed;
z-index: 99;
top: 0;
display: flex;
justify-content: space-around;
align-items: center;
}
.tab span{
display: inline-block;
height: 41px;
line-height: 41px;
}
.active{
color: #09BB07;
}
.active>i {
border-bottom: 2px solid #09BB07;
width: 36px;
margin: 0 auto;
display: block;
}
</style>
<div class="tab" id="tab">
<span class="active">待营销<i></i></span>
<span>已营销<i></i></span>
</div>
<div class="tabdiv">
<!-- 待营销 -->
<div class="tabpane" style="display: block">
222
</div>
<!-- 已营销 -->
<div class="tabpane" style="display: none">
333
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
// tab切换
var span = document.querySelectorAll('#tab span'), //css选择器
div = document.querySelectorAll('.tabpane');
for(var i=0;i<span.length;i++){ //循环span标签
span[i].idx = i; //给span一个自定义的idx属性，将I赋值进去，下边的循环不能直接拿到这个循环的i
span[i].onclick = function(){
for(var j=0;j<div.length;j++){ //循环div标签
div[j].style.display = 'none'; //每次点击都先隐藏掉div，并移除class
span[j].classList.remove('active');
}
div[this.idx].style.display = 'block'; //给当前div显示出来
this.classList.add('active'); //增加class
}
}
</script>
tab切换
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- SwiperTab 微信小程序Swiper做Tab切换，带tab切换动画 前言 小程序中我们做tab切换一般情况下...
- 1，wxml代码结构 <view class="rech-list"> <view class="{{0 ==...
- 思路： 1、在每次点击tab的时候，记录当前的tab值 2、在进入这个页面，在mouted或者created方法中...
