移动端选项卡导航栏切换样式、内容的CSS (引用了vue)

原创已于 2025-02-07 12:48:57 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue.js #前端

于 2019-12-19 12:23:44 首次发布

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Vue来实现移动端选项卡导航栏的切换效果，包括HTML结构、Vue代码逻辑和CSS样式的设置，帮助开发者创建交互式的导航体验。

移动端选项卡/导航栏切换样式、内容 (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;				//淡入
        }