vue 导航栏状态即时更新

Posted 2023-04-25

参考技术A 我们在做头部导航或者侧边导航的时候，有时会遇到高亮状态更新不上的问题。

解决方法有两种：第一可以通过存缓存来获取状态，第二可以监听路由。本文主要针对第二种方法详细解答一下：

小伙伴们首先可能想到的是watch监听$route，但是在这我不推荐使用watch，因为watch如果用户刷新页面的情况下，会兼听不到。我们用的是 window.location.pathname

active 就是代表高亮的name

加关注不迷路，小礼物走一走

单击时导航栏未更新为活动状态

【中文标题】单击时导航栏未更新为活动状态

【英文标题】：Navbar bar not updating to active when clicked

【发布时间】：2019-10-10 19:50:53

【问题描述】：

我有一个简单的导航栏，我试图在单击时使背景变为绿色。但是，它似乎不起作用。

当我将鼠标悬停在链接上时，背景变为绿色并且工作正常。但是我无法得到它，所以当我点击链接时，背景保持绿色，如果我点击另一个链接，新的活动变为绿色，之前的活动变为白色。

$(".sidebar ul li").on("click", function() 
  $(".sidebar ul li").removeClass("active");
  $(this).addClass("active");
);

.sidebar 
  margin: 0;
  padding: 0;
  width: 276px;
  background-color: #ffffff;
  position: fixed;
  height: 100%;


.sidebar a 
  display: block;
  color: #444444;
  padding: 4px 0px 4px 15px;
  text-decoration: none;
  font-size: 14px;


.sidebar a:hover 
  border: 1px;
  border-collapse: #1aa322;
  background-color: #1aa322;
  color: #ffffff;


.sidebar li.active 
  color: #ffffff;
  background-color: #1aa322;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
  <div id="logo">
    <IMG SRC="img/logo.png" ALT="Logo">
  </div>
  <div>
    <div id="menu-header">
      <p>INTRODUCTION</p>
    </div>
  </div>
  <ul>
    <li class="" id=menu>
      <a href="#Welcome">Welcome</a>
    </li>
    <li class="" id=menu>
      <a href="#Authentication">Authentication</a>
    </li>
    <li class="" id=menu>
      <a href="#Pagination">Pagination</a>
    </li>
    <li class="" id=menu>
      <a href="#Errors">Errors</a>
    </li>
  </ul>

【问题讨论】：

现在当你点击链接时它变成绿色等等。我没有得到你想要的预期结果？

当我点击它什么都不做。如果我单击并将鼠标移开，它会回到白色背景

从提供的代码来看，似乎有想要的结果。我认为您可能有导致问题的其他样式。 codepen.io/anon/pen/dEmvOY

我可以看到，当您单击链接时，它会将背景变为绿色。当你点击另一个链接时，另一个背景会变成绿色，而之前的链接会变成白色背景。

【参考方案1】：

一个原因可能是当你点击时，它被点击的是锚元素而不是 li。

您可以将一个类添加到您的 a 标记中，然后将该类作为 click 函数的目标。并且还可以修改css，在a有class的时候添加背景。

所以你的锚元素是这样的

<li>
   <a class="nav-link" href="#Welcome">Welcome</a>
</li>

你的 CSS 看起来像

.sidebar .nav-link.active 
   color: #ffffff;
   background-color: #1aa322;
 

你的 js 会是这样的

$(".nav-link").on('click', function () 
    $(".nav-link").removeClass("active");
    $(this).addClass("active");
);

另一个原因可能是您在元素存在之前执行了 js。所以试着像这样包装你的代码。

$(document).ready(function() 
    $(".sidebar ul li").on("click", function () 
        $(".sidebar ul li").removeClass("active");
        $(this).addClass("active");
    );
);

两种解决方案都有效。

而且你也不应该在多个元素中使用相同的 id。所以你应该去掉 id="menu" 或者把它改成对每个元素都是唯一的

【参考方案2】：

将 jquery 链接添加到您的代码中

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$(".sidebar ul li").on("click", function () 
    $(".sidebar ul li").removeClass("active");
    $(this).addClass("active");
);

.sidebar 
  margin: 0;
  padding: 0;
  width: 276px;
  background-color: #ffffff;
  position: fixed;
  height: 100%;


.sidebar a 
  display: block;
  color: #444444;
  padding: 4px 0px 4px 15px;
  text-decoration: none;
  font-size: 14px;


.sidebar a:hover 
  border: 1px;
  border-collapse: #1aa322;
  background-color: #1aa322;
  color: #ffffff;


.sidebar li.active 
  color: #ffffff;
  background-color: #1aa322;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
    <div id="logo">
        <IMG SRC="img/logo.png" ALT="Logo">
    </div>
    <div>
        <div id="menu-header">
            <p>INTRODUCTION</p>
        </div>
    </div>
    <ul>
        <li class="" id=menu>
            <a href="#Welcome">Welcome</a>
        </li>
        <li class="" id=menu>
            <a href="#Authentication">Authentication</a>
        </li>
        <li class="" id=menu>
            <a href="#Pagination">Pagination</a>
        </li>
        <li class="" id=menu>
            <a href="#Errors">Errors</a>
        </li>
    </ul>

【参考方案3】：

我已在此处添加了您的代码 - 它似乎工作正常。 也许有些东西与您的导航栏重叠？会发生吗？

$(".sidebar ul li").on("click", function () 
    $(".sidebar ul li").removeClass("active");
    $(this).addClass("active");
);

.sidebar 
  margin: 0;
  padding: 0;
  width: 276px;
  background-color: #ffffff;
  position: fixed;
  height: 100%;


.sidebar a 
  display: block;
  color: #444444;
  padding: 4px 0px 4px 15px;
  text-decoration: none;
  font-size: 14px;


.sidebar a:hover 
  border: 1px;
  border-collapse: #1aa322;
  background-color: #1aa322;
  color: #ffffff;


.sidebar li.active 
  color: #ffffff;
  background-color: #1aa322;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
    <div id="logo">
        <IMG SRC="img/logo.png" ALT="Logo">
    </div>
    <div>
        <div id="menu-header">
            <p>INTRODUCTION</p>
        </div>
    </div>
    <ul>
        <li class="" id=menu>
            <a href="#Welcome">Welcome</a>
        </li>
        <li class="" id=menu>
            <a href="#Authentication">Authentication</a>
        </li>
        <li class="" id=menu>
            <a href="#Pagination">Pagination</a>
        </li>
        <li class="" id=menu>
            <a href="#Errors">Errors</a>
        </li>
    </ul>
</div>