VUE tab面板切换伴随点击选中变色

最新推荐文章于 2024-01-18 10:16:31 发布

原创

最新推荐文章于 2024-01-18 10:16:31 发布 · 2.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍如何在Vue.js应用中创建一个Tab面板，实现点击切换时选中项变色的效果。通过点击事件传递值，利用:class动态绑定CSS类实现选中状态的视觉变化，并使用v-show根据当前选中值控制右侧模块的显示和隐藏。

效果如图：左边Tab列表点击选中有变色效果，对应切换右边模块

思路：点击事件传值拿到对应值根据对应值 :class 给相应的li绑定上点击效果的css类名

v-show通过判断拿到的cur的值对应隐藏或展现（display：none）

HTML

  <ul class="list-box">
        <li
          @click="clickCategory(1), (cur = 1)"
          :class="{ active: categoryIndex == 1 }"
        >
          <i class="iconfont iconFrame"></i>&nbsp; 个人信息
        </li>
        <li
          @click="clickCategory(2), (cur = 2)"
          :class="{ active: categoryIndex == 2 }"
        >
          <i class="iconfont iconsuo"></i>&nbsp; 账号密码
        </li>
      </ul>

<div v-show="cur == 1" class="person-msg-box">
       个人信息
</di

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MittyLee

关注关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

{技术操作} Vue tab 切换点击栏目背景色改变，内容也改变

酱子

11-08

1664

html <div class="card_title"> <div :class="{'card_title_select':selectTab_item===0}" @click="selectTab_qiye(0)">工业</div> <div :class="{'card_title_select':selectTab_item===1}"...

Vue3实现带动画效果的tab栏切换

最新发布

weixin_53339757的博客

02-20

2987

vue3实现tab栏切换（带过渡动画效果）

参与评论您还未登录，请先登录后发表或查看评论

点击选中的导航栏改变颜色

hurley11的博客

08-17

3064

1，如果点击的导航栏为item，则使用.nav-active的样式（自定义改变颜色） <div> <div :class="nav_id===item.id?'nav-active':''" v-for="(item,index) in List" :key="index" @click="getNavId(item.id)"> <a>{{item.label}}</a> </

vue+elemen ui实现左侧导航栏，右侧内容变化

qq_30815659的博客

12-17

6314

一、首先编写导航栏组件我的页面是大项目中的一部分，项目之前已经安装了路由等。首先在component中添加guide.vue文件。选择element的一个组件，示例代码如下 <template> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"&g...

UITabBar 设置选中、未选中状态下title的字体颜色

weixin_30247307的博客

06-21

355

一、如果只是设置选中状态的字体颜色，使用 tintColor 就可以达到效果 [objc] view plain copy self.tabBar.tintColor=[UIColorredColor]; 二、但如果要将未选中状态和选中状态下的颜色都改变，可以使用 setTitleTextAttributes:<#(nullable N...

点击导航栏按钮切换按钮背景色

04-15

1813

解决点击导航栏点击哪个，哪个就高亮变色，其他恢复原状。这里我用的是vue框架和element ui组件库写的。主要就是一个点击事件和一个for循环。 HTML <div id="app">  <div id="nav"> <router-link @click.native="dianji(index)" :class="{ clk: index == dynamic }"

vue实现tab切换样式

YY110621的博客

12-04

6361

现成的vue移动端点击tab 切换样式功能。需要的拿去根据自己的需求改一下样式 <template> <div class="container"> <ul class="tab-list"> <li class="tab-li" :class="actiove

基于swiper和vue实现：点击和滑动页面实现tab切换

无知者无畏

10-27

3692

点击和滑动页面实现tab切换 components / tabItem 下面有 swiper.vue nav.vue one.vue two.vue … router.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', redirect: '/

使用vue实现按钮的切换（vue tab切换）

weixin_44283571的博客

05-24

2711

1.效果图 2.代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试vue</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head>

tab栏切换的小例子

cccccl的博客

03-02

567

tab栏切换的小例子初学JS&API 跟着视频做了一个 tab 栏切换的案例思路： 1、tab切换点击上面的选项卡底色会变成红色，其余不变（利用排他思想—核心是先干掉其他人，然后留下我自己）----这里可以使用修改类名的方式 2、当点击上面的选项卡后下面的内容会随之变化，下面要写到点击事件里 3、上面的选项与下面的内容一一对应，可以给上面的每一个选项添加自定义的属性，属性值从0开始，与for循环里的 i 值相对应更加方便~~ <!DOCTYPE html> <html l

vue 点击谁谁变色

Cousin__的博客

05-21

5568

vue 点击谁让谁变色（添加class属性）改变当前元素的样式 1.先设置一下要点中的样式 <style> .active { border: 6px solid #ff6c00; color: #ff6c00; background: #fff7e9; } </style> 2. 然后就可以给我们的 li 添加点击事件 <ul id="app"> <li v-for='(item,index) in items' ...

自定义指令实现tabs切换颜色高亮

dongwei666的博客

07-20

1190

vue自定义事件的练习，使用自定义组件实现tabs切换颜色高亮显示

Vue——style动态绑定样式

月来better

01-18

1249

vuetify中的v-tabs组件默认字体颜色是白色，但是我们项目中这个字体颜色是要根据用户设置的颜色变换 <v-tabs v-if="qrcode" fixed-tabs v-model="tabs" class="my-4" :color="highlightColor" > <v-tab class="tab-item" :style="styleObject" v-for="source in tabSources" :key

VUE tab面板切换伴随点击选中变色

qq_39325568的博客

01-18

527

【代码】VUE tab面板切换伴随点击选中变色。

vue实现tab页切换并随切换变色

Q_xyue的博客

09-10

2389

在实现这个功能时借鉴的原博主的方法没有实现切换变色，琢磨了好久终于知道了怎么切换变色（小菜鸟的咆哮）！！！记录下来以供参考，以下是vue的完整tab页切换并变色的代码框架。 <template> <div > //tab页切换按钮部分 <ul > <li v-for="(item,index) in navList" :class = "{active:!(index- menuIndex)}"

python测试开发django-153.bootstrap导航-标签页切换(nav-tabs)

qq_27371025的博客

10-13

2411

前言 Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。标签页.nav-tabs 类依赖 .nav 基类。 tab标签页在标签 ul 添加 nav 和 nav-tabs 属性,将应用Bootstrap标签样式。在li 里面 a 标签上简单的指定 data-toggle=“tab” 或 data-toggle=“pill”，就可以完成一个标签导航页 <ul id="tabs" class="nav nav-tabs"> <li><a h

前端项目实践案例——制作Tab选项卡点击切换效果

shhghvvh的博客

11-23

4281

制作Tab选项卡点击切换效果

Vue简单实现tab栏切换（高亮）

从容日月长

08-27

8809

在许多项目中，最常见的莫过于tab栏切换高亮以及根据tab栏切换渲染数据，这时候就有刚入门的小伙伴问了，如何不用快捷组件快速简单的实现tab栏高亮呢？非常简单，我们只需要通过index就可以实现了！ 1、首先，我们在data中定义一个activeIndex data() { return { activeIndex:0 }; }, activeIndex当做下标使用，这里赋值为0默认第一个，可以赋值为-1（-1的话在页面渲染是不会被显示的） 2、然...

vue实现tabs页签切换+自适应

lu123ying的博客

12-29

1841

vue实现tabs页签切换+自适应

Vue实现Tab滚动固定顶部与内容切换

Vue Tab 滚动固定顶部切换内容操作 Vue Tab 滚动固定顶部切换内容操作概述在 Vue 中，实现 Tab 滚动固定顶部切换内容操作是非常常见的需求。通过这篇文章，我们将介绍如何使用 Vue 实现 Tab 滚动固定顶部切换...

VUE tab面板切换 伴随点击选中变色

VUE tab面板切换伴随点击选中变色