Vue - 点击导航栏当前标签后变色功能（导航栏当前hover样式）

心已赠人 2022-11-28 13:19 455阅读 0赞

## 效果图 ##

![在这里插入图片描述][20200817173617973.gif_pic_left]

## 实现 ##

这个功能，借助一个切换标识，当与各标签项 `index` 对应时切换 `css`。

**HTML：**

<template>
      <div class="nav">
    
        
        <ul>
          <li v-for="(item,index) in nav" :class="{ active: index == current }" @click="go(index)">
            {
       { item }}
          </li>
        </ul>
        
    
      </div>
    </template>

**JavaScript：**

<script>
    
    export default { 
    
      data(){ 
        return { 
          current: 0,//切换标识
          nav: [//导航栏数据
            '首页',
            '新闻中心',
            '要闻资讯',
            '联系我们'
          ]
        }
      },
    
      methods: { 
    
        // 导航栏切换
        go(index) { 
          this.current = index//激活样式
        }
    
      }
    }
    
    </script>

**CSS：**

<style>
    
      /*点击切换变色导航栏*/
      ul li { 
        list-style: none;
        float: left;
        margin-right: 20px;
        padding:10px;
      }
      .active{ /*激活样式*/
        color: red;
      }
      
    </style>

[20200817173617973.gif_pic_left]: /images/20221124/7241cea6c1af4ebe859c04c666a36f6f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，455人围观）

还没有评论，来说两句吧...

相关阅读

相关 flutter导航栏点击无效

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2

小灰灰/ 2022年11月29日 03:07/ 0 赞/ 187 阅读

相关微信小程序 - 点击导航栏标签切换变色（导航栏当前hover样式）

效果图 ![在这里插入图片描述][202008171850293.gif_pic_left] 实现这个功能，借助一个切换标识，当与各标签项 `index` 对应

迈不过友情╰/ 2022年11月28日 13:24/ 0 赞/ 387 阅读

相关 Vue - 点击导航栏当前标签后变色功能（导航栏当前hover样式）

效果图 ![在这里插入图片描述][20200817173617973.gif_pic_left] 实现这个功能，借助一个切换标识，当与各标签项 `index`

心已赠人/ 2022年11月28日 13:19/ 0 赞/ 456 阅读

相关给当前页或者跳转后页面的导航栏添加选中样式

用Jquery(js)给当前页或者跳转后页面的导航栏添加选中当鼠标选中页面导航栏的某一栏目后，如何给选中栏目添加特殊样式，一直没怎么搞清楚，今天学习了一下，并做个总结。

￡神魔★判官ぃ/ 2022年09月24日 10:25/ 0 赞/ 140 阅读

相关 Vue滚动监听导航栏样式变化，实现导航栏绑定内容锚点+滚动动画+vue-router

[https://www.jianshu.com/p/2ad8c8b5bf75][https_www.jianshu.com_p_2ad8c8b5bf75] <tem

柔情只为你懂/ 2022年09月10日 06:30/ 0 赞/ 181 阅读

相关 JAVASCRIPT之导航栏鼠标点击变色特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

左手的ㄟ右手/ 2022年07月12日 02:46/ 0 赞/ 166 阅读

相关 JAVASCRIPT之导航栏鼠标点击变色特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

不念不忘少年蓝@/ 2022年07月12日 02:46/ 0 赞/ 187 阅读

相关导航栏

想必大家在百度上见过许多导航栏的代码，下面我来为大家安利三种比较实用的导航栏（仅靠html/css来实现）： 1 下拉菜单栏： <!DOCTYPE html>

深藏阁楼爱情的钟/ 2022年05月25日 10:58/ 0 赞/ 338 阅读

相关 jquery实现点击导航栏变色

效果如下 ![20190506115333967.gif][] 思路： 1、在css里面设置两个class ![watermark_type_ZmFuZ3po

男娘i/ 2022年04月25日 06:16/ 0 赞/ 394 阅读

相关导航栏

今天做一个百度首页的导航栏 ![在这里插入图片描述][20190716200535505.png] <!DOCTYPE html> <html>

「爱情、让人受尽委屈。」/ 2021年12月07日 11:55/ 0 赞/ 452 阅读