移动端tab的样式改变

版权声明：文章资料来源于网络，都是由作者自己总结下来以供参考学习~如涉及版权问题请联系作者！ https://blog.csdn.net/C_hydar/article/details/83862101

第一种：通过使用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>