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

最新推荐文章于 2024-06-30 11:06:07 发布
最新推荐文章于 2024-06-30 11:06:07 发布
阅读量2.1k 收藏 9
点赞数 2
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MittyLee/article/details/107457777
版权
本文介绍如何在Vue.js应用中创建一个Tab面板，实现点击切换时选中项变色的效果。通过点击事件传递值，利用:class动态绑定CSS类实现选中状态的视觉变化，并使用v-show根据当前选中值控制右侧模块的显示和隐藏。
摘要由CSDN通过智能技术生成

 

效果如图：  左边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>

 


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  MittyLee
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    9
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue 实现tab切换保持数据状态

				
			

			

				

					10-15
				

			

		

		

			
				
在Vue开发过程中，保持数据状态是常见的需求，特别是在实现Tab切换功能时，用户可能希望在切换Tab后，之前填写的数据或者加载的内容能够被保存。本文将深入探讨如何在Vue中实现Tab切换时保持数据状态。  首先，让...

			
		

	



                

              
                



	

		

			

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

				
			

			

				

					Q_xyue的博客
				

				

					09-10
					
					2242
					
				

			

		

		

			
				
在实现这个功能时借鉴的原博主的方法没有实现切换变色，琢磨了好久终于知道了怎么切换变色（小菜鸟的咆哮）！！！记录下来以供参考，以下是vue的完整tab页切换并变色的代码框架。


​
<template>
<div >
     //tab页切换按钮部分
      <ul >
        <li v-for="(item,index) in navList" :class = "{active:!(index- 
            menuIndex)}"

			
		

	



                


  
              

                


	

		

			

				
					
Vue——style动态绑定样式

				
			

			

				

					月来better
				

				

					01-18
					
					1156
					
				

			

		

		

			
				
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

			
		

	





	

		

			

				
					
Vue3实现点击按钮实现文字变色

					
最新发布

				
			

			

				

					m0_62785037的博客
				

				

					06-30
					
					706
					
				

			

		

		

			
				
Vue3实现点击按钮实现文字变色方法，如动态样式、动态类名

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					$
				

				

					04-15
					
					1690
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					hurley11的博客
				

				

					08-17
					
					2846
					
				

			

		

		

			
				
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>
    </

			
		

	





	

		

			

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

				
			

			

				

					qq_27371025的博客
				

				

					10-13
					
					2213
					
				

			

		

		

			
				
前言
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
					
					3255
					
				

			

		

		

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

			
		

	





	

		

			

				
					
Vue实现点击后文字变色切换方法

				
			

			

				

					08-28
				

			

		

		

			
				
Vue实现点击后文字变色切换方法  Vue框架是当前最流行的前端框架之一，具有强大的功能和灵活的开发体验。其中，实现点击后文字变色切换方法是非常常见的一种交互式效果，本文将详细介绍如何使用Vue实现点击后文字...

			
		

	





	

		

			

				
					
vue点击标签切换选中及互相排斥操作

				
			

			

				

					10-15
				

			

		

		

			
				
在Vue框架中实现点击标签切换选中状态以及保证标签之间互相排斥的逻辑操作是常见需求之一。本知识点将详细解释如何在Vue项目中实现点击标签切换选中状态以及如何设置标签之间的互相排斥规则。  首先，需要明确的是，...

			
		

	





	

		

			

				
					
vue滚动tab跟随切换效果

				
			

			

				

					10-16
				

			

		

		

			
				
为每个tab项添加点击事件处理器`handleSelectTab`来切换选中状态，并根据`active`值动态应用样式：  ```html ['tablist', headerFixed ? 'tabFixed' : '']" id="tab">    @click="handleSelectTab(item.id)"  :class...

			
		

	





	

		

			

				
					
基于Vue实现tab栏切换内容不断实时刷新数据功能

				
			

			

				

					08-30
				

			

		

		

			
				
本篇文章将详细介绍如何使用Vue来实现Tab栏切换时内容不断实时刷新数据的功能。  首先，理解产品需求：有多个Tab（例如5个），每个Tab对应不同的Ajax请求，内容区域相同，数据需要每3秒刷新一次。当用户切换Tab时，...

			
		

	





	

		

			

				
					
tab栏切换的小例子

				
			

			

				

					cccccl的博客
				

				

					03-02
					
					501
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					酱子
				

				

					11-08
					
					1582
					
				

			

		

		

			
				
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}"...

			
		

	





	

		

			

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

				
			

			

				

					从容日月长
				

				

					08-27
					
					8236
					
				

			

		

		

			
				
在许多项目中，最常见的莫过于tab栏切换高亮以及根据tab栏切换渲染数据，这时候就有刚入门的小伙伴问了，如何不用快捷组件快速简单的实现tab栏高亮呢？非常简单，我们只需要通过index就可以实现了！

1、首先，我们在data中定义一个activeIndex


 data() {
    return {
      activeIndex:0
    };
  },

activeIndex当做下标使用，这里赋值为0默认第一个，可以赋值为-1（-1的话在页面渲染是不会被显示的）

2、然...

			
		

	





	

		

			

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

				
			

			

				

					weixin_30247307的博客
				

				

					06-21
					
					267
					
				

			

		

		

			
				
一、如果只是设置选中状态的字体颜色，使用 tintColor 就可以达到效果


[objc] view plain copy


self.tabBar.tintColor=[UIColorredColor];


二、但如果要将未选中状态和选中状态下的颜色都改变，可以使用 setTitleTextAttributes:<#(nullable 
N...

			
		

	





	

		

			

				
					
vue 使用tab切换，tab下的内容展示不同的组件页面

				
			

			

				

					weixin_44934104的博客
				

				

					12-22
					
					2277
					
				

			

		

		

			
				
功能说明： 点击添加的时候，可根据的不同tab切换到添加不同数据的页面
//HTML部分
<ul class="tab_tit">
      <li :class="currentView== 'child1' ?'active':''" @click="tabChange(child1)">图文</li>
      <li :class="currentView== 'child2' ?'active':''" @click="tabChange(child2

			
		

	





	

		

			

				
					
Vue实现选项卡切换，tab切换

					
热门推荐

				
			

			

				

					努力变好
				

				

					10-28
					
					1万+
					
				

			

		

		

			
				
1、实现tab切换就是 单击一个选项卡显示其对应的内容，且被点击的选项卡改变颜色，下面有两种实现方法（都不要忘了vue.js的目录要写正确）

2、第一种方法效果图





这个没什么可说的，直接看代码吧（两种方式）

2、第一种完整代码（下边这段代码是我在网上学的）


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document<.

			
		

	





	

		

			

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

				
			

			

				

					lu123ying的博客
				

				

					12-29
					
					1639
					
				

			

		

		

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

			
		

	





	

		

			

				
					
vue tab切换

				
			

			

				

					06-01
				

			

		

		

			
				
Vue中实现Tab切换可以使用v-if或v-show指令来控制不同的内容在不同的Tab之间切换。  首先，你需要定义一个数据属性来控制当前选中的Tab：  ``` data() {  return {  activeTab: 'tab1'  } } ```  然后，在HTML中设置...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值