第一种:通过使用JS来增加或删除类名来达到可以切换tab的时候样式也跟着改变的效果!主要是增加和删除"active"这个类名,当选中一个tab的时候,这个tab的类名就多了“active”,其他tab没有
HTML:
<!-- bottom -->
<ul id="bottom">
<a href="index.html" class="icon active">
<li>
<i class="1"></i>
<span>1</span>
</li>
</a>
<a href="#" class="2">
<li>
<i class="chat"></i>
<span>2</span>
</li>
</a>
<a href="#" class="icon">
<li>
<i class="3"></i>
<span>3</span>
</li>
</a>
</ul>
/* bottom tab的整体样式*/
#bottom {
width: 100%;
height: ;
background-color: rgba(, , , );
position: fixed;
bottom: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: ;
}
/* 没有选中之前的样式 */
.icon li {
color: #000000;
font-size: ;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
/*没有选中之前的icon样式*/
.1:before {
width: ;
height: ;
display: block;
content: '';
margin: 0 auto;
background-image: url(../icon/home_normal.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.2:before {
width: ;
height: ;
display: block;
content: '';
margin: 0 auto;
background-image: url(2_normal.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.3:before {
width: ;
height: ;
display: block;
content: '';
margin: 0 auto;
background-image: url(3_normal.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
/* 选中之后 */
.active li{
color: #ffffff;
font-size: 0.1rem;
}
/*选中之后的icon样式*/
.active .home:before{
background-image: url(1_press.png);
}
.active .chat:before{
background-image: url(2_press.png);
}
.active .mine:before{
background-image: url(3_press.png);
}
JS:
// tab切换样式
window.onload = function () {
//根据类名获取全部按钮
var arr = document.getElementsByClassName('icon');
for (var i = 0; i < arr.length; i++) {
//给全部按钮添加onclick事件
arr[i].onclick = function () {
console.log('点击' + this.id);
//1.首先把所有按钮的选中状态去掉
for (var j = 0; j < arr.length; j++) {
arr[j].classList.remove('active');
}
//2.this是当前激活的按钮,为当前激活的按钮添加选中状态类名
this.classList.add('active');
}
}
}
第二种:在vue文件中实现导航栏切换时,样式也随之改变
<template>
<div>
<div class="inquiryType">
<span class="title">问诊类型</span>
<ul class="items">
<li @click="clickHandle(1)" :class="currentType==1 ? 'on' :'notOn' ">病情咨询</li>
<li @click="clickHandle(2)" :class="currentType==2 ? 'on' :'notOn' ">挂号咨询</li>
<li @click="clickHandle(3)" :class="currentType==3 ? 'on' :'notOn' ">用药建议</li>
<li @click="clickHandle(4)" :class="currentType==4 ? 'on' :'notOn' ">诊后指导</li>
</ul>
</div>
<style scoped>
/*问诊类型*/
.items {list-style: none; display: flex; justify-content: space-between; padding: 0; }
/*没有选中的样式*/
.items li {display: flex; align-items: center; justify-content: center; border-radius: 2px; border: 1px solid none; line-height: 1; width: 80px; height: 30px;}
.notOn {color: #999999; font-size: 12px; background-color: #f2f2f2;}
/*选中样式*/
.on {background-color: #3091f2; font-size: 12px; line-height: 1.25; color: #ffffff; }
</style>
<script>
export default{
name: '',
data() {
return{
currentType: 0
}
},
mounted() {},
//主要代码
methods:{
clickHandle (num) {
this.currentType = num;
}
},
beforeRouteLeave(to, form, next) {}
}
</script>