gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 00:25:13 25 4
gpt4 key购买 nike

我正在尝试为我的导航栏创建一个事件类,以便人们可以看到他们所在的页面。我在文件中创建了 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;
}

最佳答案

Bootstrap getting started说:

Many of our components require the use of JavaScript to function. Specifically, they require jQuery,

所以你错过了标题中的这一行:

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

关于javascript - 尝试添加和删除类时,$ 未在 ejs 文件中定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54124108/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com