尽管代码相同，但切换菜单按钮在索引页面上有效，但在其他页面上无效 - 为什么？

Question

花费数小时试图解决我在切换菜单按钮时遇到的问题。在索引页面的小屏幕上完美运行 - 但不适用于投资组合和联系页面。尽管代码和文件相同（jquery 和引导文件以相同的顺序附加）。有什么建议？这是网站链接：https://www.jophilippa.com/

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="portfolio.html"></a><img src="../img/logo.jpg" class="logo" width="200" height="90" alt="Jo Philippa logo"/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent1">
    <ul class="navbar-nav mr-auto">
     <li class="nav-item"> <a class="nav-link" href="../index.html">ABOUT </a> </li>
     <li class="nav-item active"> <a class="nav-link" href="portfolio.html">PORTFOLIO <span class="sr-only">(current)</span></a> </li>
    <li class="nav-item"> <a class="nav-link" href="contact.html">CONTACT</a> </li> 
    </ul>  
  </div>
</nav> 

Answer 1

通过快速查看您的网站和源代码，您正在通过相对路径链接到您的 jquery 文件，更具体地说，我指的是这段代码：

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>

这适用于https://www.jophilippa.com/（因为它加载https://www.jophilippa.com/js/jquery-3.4.1.min.js），但不适用于https://www.jophilippa.com/pages/portfolio.html，因为它加载https://www.jophilippa.com/pages/js/jquery-3.4.1.min.js，显然不存在）。

在路径前加一个/，使它们绝对从网站的根目录开始：

<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap-4.4.1.js"></script>