Question

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

当我将鼠标悬停在链接上时，背景变为绿色并且工作正常。但是我无法理解它，所以当我单击链接时，背景保持绿色，如果单击另一个链接，则新的活动对象变为绿色，而先前的活动对象变为白色。

$(".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>

Answer 1

我已经在这里添加了您的代码-似乎正常。导航栏可能重叠了吗？会发生吗？

$(".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>

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

Answer 3

一个原因可能是单击时单击的是锚元素而不是li。

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

对于您的锚点元素来说，像这样

<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”或将其更改为每个元素都是唯一的

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

3 个答案: