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

【问题标题】：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
我可以看到，当您单击链接时，它会将背景变为绿色。当你点击另一个链接时，另一个背景会变成绿色，而之前的链接会变成白色背景。

标签： javascript html css

【解决方案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>

【讨论】：