Javascript jquery 添加活动 class

Question

我正在尝试使用 jQuery 将 active class 添加到我的无序列表中。我在 Whosebug 上尝试了很多解决方案，但似乎都行不通。我想让 active class 颜色变成红色。谁能告诉我为什么它不起作用？

$("li").click(function() {
  $("li").removeClass("active");
  $(this).addClass("active");
});

.active { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navbar">
  <li class="active"><a href="#">link</a></li>
  <li class=""><a href="#">link</a></li>
  <li class=""><a href="#">link</a></li>
  <li class=""><a href="#">link</a></li>
  <li class=""><a href="#">link</a></li>
  <li class=""><a href="#">link</a></li>
</ul>

我的浏览器控制台也出现此错误：

 error: $("li").click() is not a valid function

Answer 1

您的代码运行良好。但我看到你说你收到一条错误消息 error: $("li").click(function() is not a valid function。在将主 jQuery 脚本加载到文档

之前加载包含 jQuery 函数的自定义 JS 代码时，我们通常会收到此错误消息

所以要解决这个问题，请将 jQuery 库代码放在 HTML <head></head> 标签中

.active { color: red; }
.active a { color: red; }

<!doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <ul class="navbar">
      <li class="active"><a href="#">link</a></li>
      <li class=""><a href="#">link</a></li>
      <li class=""><a href="#">link</a></li>
      <li class=""><a href="#">link</a></li>
      <li class=""><a href="#">link</a></li>
      <li class=""><a href="#">link</a></li>
    </ul>

    <!-- Your custom script here -->
    <script>
      $("li").click(function() {
        $("li").removeClass("active");
        $(this).addClass("active");
      });
    </script>
  </body>
</html>

Javascript jquery 添加活动 class

Javascript jquery add active class

html

javascript

css

jquery

class