问题描述
在我们做项目的过程中,有时候会要做一些tab栏切换效果。有两个tab的,有三个tab的,甚至有五六七八个tab的。平常我们直接拿饿了么的tab组件用就行了,但是偶尔自己闲着没事,自己写个两个tab切换效果的,即二选一效果。闲话少说,上动态效果图
本案例适合两个tab的(三个tab的可以仿照我的写,如果是四五个tab用饿了么组件会更快些)
代码如下
HTML部分
<template> <div id="app"> <div class="tabWrap"> <!-- 这个结构是tab导航,并给其绑定对应的点击事件,在点击事件的回调中 去控制对应内容的显示隐藏和样式的修改即:tab的切换--> <div class="tabNav"> <div class="navOne" @click="tabOne">tab1</div> <div class="navTwo" @click="tabTwo">tab2</div> </div> <!-- 这个结构是tab导航对应的内容 --> <div class="tabContent"> <!-- 通过v-show控制隐藏,同一时刻隐藏一个显示一个,就实现了tab栏的切换效果了 --> <div class="navOneBox" v-show="showTabOne">我是切换1</div> <div class="navTwoBox" v-show="showTabTwo">i am tab2</div> </div> </div> </div> </template>
js部分
<script> export default { name: "app", data() { return { showTabOne: true, // 二选一tab切换 showTabTwo: false, // 二选一tab切换 }; }, methods: { // 二选一tab栏切换 tabOne() { /* 点击tab1的时候,让tab1显示,tab2隐藏,即showTabOne为true,showTabTwo为false 同时修改tab1的样式使其"高亮",注意不要忘了修改tab2的样式,使其"不高亮"。 点击tab2的时候,也是同理。 */ this.showTabOne = true; this.showTabTwo = false; document.querySelector(".navOne").style.backgroundColor = "#fff"; document.querySelector(".navTwo").style.backgroundColor = "#e3e3e3"; document.querySelector(".navOne").style.color = "#3985EC"; document.querySelector(".navTwo").style.color = "#80868D"; }, // 二选一tab栏切换 tabTwo() { this.showTabTwo = true; this.showTabOne = false; document.querySelector(".navOne").style.backgroundColor = "#e3e3e3"; document.querySelector(".navTwo").style.backgroundColor = "#fff"; document.querySelector(".navTwo").style.color = "#3985EC"; document.querySelector(".navOne").style.color = "#80868D"; }, }, }; </script>
css部分
<style lang="less"> .tabNav { width: 126px; height: 30px; border-radius: 2px; background-color: #e3e3e3; display: flex; align-items: center; justify-content: space-evenly; .navOne { width: 60px; height: 26px; border-radius: 2px; background-color: #fff; color: #3985ec; font-size: 14px; font-weight: 500; display: flex; justify-content: center; align-items: center; cursor: pointer; } .navTwo { width: 60px; height: 26px; color: #80868d; border-radius: 2px; font-size: 14px; font-weight: 500; display: flex; justify-content: center; align-items: center; cursor: pointer; } } .tabContent { margin-top: 8px; .navOneBox { background-color: #bfa; } .navTwoBox { background-color: #baf; } } </style>
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“vue二选一tab栏切换新做法实现”评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]