Question

我正在尝试为导航栏创建一个活动类，以便人们可以看到他们所在的页面。我在文件中创建了JQuery逻辑，但是当我尝试运行程序时，它会出现错误：“参考错误，未定义$”。我尝试安装jquery程序包，但没有帮助。下面是代码：

<!DOCTYPE html>
 <html>
  <head>
<title>Portfolio</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link rel = "stylesheet" href = "/stylesheets/main.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
 <body class="main">

 <nav class="navbar navbar-expand-lg navbar-light">
  <a class="navbar-brand text-white" href="/">Cody Blackwood</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link text-white" href="/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-white" href="/projects">Projects</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-white" href="/info">About Me</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-white" href="/resume">Resume</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-white" href="/contact">Contact</a>
    </li>
  </ul>
 </div>
</nav>

<script>
 $(document).ready(function() {
  $(".nav-item").on("click", function(event){
    $("li.nav-item").removeClass("active");
    $(this).addClass("active");
   });
 });
</script>

CSS：

.navbar-nav .nav-item .nav-link {
   color: white;
 }

.navbar-nav .nav-item:active .nav-link{
  background-color: white;
  color: #5900b3;
}

Answer 1

Bootstrap getting started说：

我们的许多组件都需要使用JavaScript才能起作用。具体来说，他们需要jQuery，

所以您从标题中错过了这一行：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Answer 2

ejs是一个模板，它将生成一个有效的html。看来您的代码在服务器端运行。

确保已正确加载jQuery
您的js代码应在客户端运行，以<script></script>而不是<% %>来结束
在DOM准备就绪时运行代码window.onload = () => { /* ... */ }

Answer 3

在之前加载<％>之间定义的

ejs函数，然后呈现页面内容，因此，当您尝试$('#id1').doSomething();时，jquery将无法找到该元素与id="id1"一起使用，因为该元素尚不存在。

如果要按照描述的方式修改导航栏，则必须创建一个

<script src="jquery.js"></script>

下方您要修改的元素。

jquery.js看起来像这样：

$(document).ready(function() {
    $(".nav-item").on("click", function(event){
             $("li.nav-item").removeClass("active");
             $(this).addClass("active");
    });
});

如果尝试此操作后仍然遇到问题，则说明您可能没有正确设置jquery。
遵循this link来了解有关在node.js上设置jquery的信息。

如果您想学习如何使短绒棉铃警告静音，请查看here。

编辑

<script>
 $(document).ready(function() {
  $(".nav-item").on("click", function(event){

    $(this).closest("li").css('background-color', 'red').siblings().css('background-color', 'white');

   });
 });
 </script>

尝试添加和删除类时，未在ejs文件中定义$

3 个答案:

编辑