移动端 选项卡/导航栏 切换样式、内容 (vue)
Nav导航栏/选项卡的html
<div class="nav">
<div :class="{active:(navId==0)}" @click='navC(0)'>//根据navId切换激活样式
全部
</div>
<div :class="{active:(navId==1)}" @click='navC(1)'>//点击更改navId的值
知识
</div>
<div :class="{active:(navId==2)}" @click='navC(2)'>
力量
</div>
</div>
展示部分的html
<div class="show">
<div v-show="(navId==0)"> //根据navID切换显示
<h2>全部全部全部全部全部全部全部全部全部11</h2>
</div>
<div v-show="(navId==0||navId==1)"> //navID为0和1时都可展示
<h2>知识知识知识知识知识知识知识知识知识1111</h2>
</div>
<div v-show="(navId==0||navId==1)">
<h2>知识知识知识知识知识知识知识知识知识2222</h2>
</div>
<div v-show="navId==0||(navId==2)">
<h2>力量力量力量力量力量力量力量力量力量1111</h2>
</div>
<div v-show="navId==0||(navId==2)">
<h2>力量力量力量力量力量力量力量力量力量AAAA</h2>
</div>
</div>
Vue代码
new Vue({
el: '#app',
data() {
return {
navId: '0'
}
},
methods: {
navC(id) {
this.navId = id
}
},
})
css样式
.nav {
font-size: 0;
}
.nav>div {
font-size: 16px;
position: relative;
width: 30vw;
text-align: center;
display: inline-block;
}
.nav>div::after {
//在导航栏每项后添加一个伪元素,可以设置 背景图或者边框
content: '';
position: absolute; //设置定位,到导航栏的正下方
left: 0;
bottom: -100%;
width: 100%;
height: 60%;
background: url('图片链接/路径') no-repeat; //可设置背景图
background-size: cover;
transition: all linear 0.3s; //设置动画切换效果
opacity: 0; //这里使用淡入淡出效果,设置透明度
}
.nav>div.active {
//设置激活样式,可更改字体大小和颜色等等
font-size: 20px;
color: #cc0000;
}
.nav>div.active::after {
//设置激活时伪元素的效果
opacity: 100; //淡入
}