使用Javascript的导航（跨应用程序共享）栏中的遍历问题答案

【问题标题】：Traversal issue in navigation(which is shared across application) bar using Javascript使用Javascript的导航（跨应用程序共享）栏中的遍历问题
【发布时间】：2021-02-24 11:29:56
【问题描述】：

由于我的应用程序之间有相同的导航栏，我想实现跨应用程序共享导航栏。

My project structure is a follows
    Login
    |-Login.html, Login.css, Login.js
    Home
    |-Home.html, Home.css, Home.js
    Test
    |-Project.html, Project.css, Project.js
         Test1
            |-Test1.html, Test1.css, Test1.js
         Test2
            |-Test2.html, Test2.css, Test2.js
    |-Temp
        |-Temp.html, Temp.css, Temp.js
    |-Shared
        |-Shared.html, Shared.css, Shared.js, navigation.html

这是我保存在共享文件夹中的 navigation.html。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
              <li class="nav-item ">
                  <a class="nav-link" 
                  href="../Home/Home.html"
                  >Home</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" 
                      href="../Employee/CreateEmployee.html"
                  >Employee</a>
              </li>
              <li class="nav-item dropdown">
                  <a  class="nav-link dropdown-toggle" 
                      id="navbarDropdown" role="button" data-toggle="dropdown" 
                      aria-haspopup="true" aria-expanded="false"
                  >Test</a>

                  <div class="dropdown-menu"   
                      aria-labelledby="navbarDropdown">
                      <a  
                          class="dropdown-item" 
                          href="../Test/Test1/NewCQ.html"
                      >Create New CQ</a>
                      <a 
                          class="dropdown-item" 
                          href="../Test/Test2/Test2.html"
                      >Update CQ</a>
                  </div>
              </li>
              <li class="nav-item">
                  <a class="nav-link" 
                      href="../Temp/Temp.html"
                  >Temp</a>
              </li>
          </ul>
          <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                  <a class="nav-link float-right" href="../Login/Login.html"
                  >Logout</a>
              </li>
          </ul>
      </div>
  </nav>

这就是我在各个 html 文件中创建 div 的方式

<div class="row border-bottom border-dark">
    <div class="col px-0">
        <!--Navigation bar-->
        <div id="navigationBar">

        </div> 
     </div>
</div>

当访问各个页面时，我正在从我在所有页面中导入的共享文件夹中加载 shared.js 中的该 navigation.html 文件。

//Load navigation.html from shared folder
$(function(){
    $("#navigationBar").load("../Shared/navigation.html");
});

这里的问题是

不同页面的相对路径会有所不同，所以我需要如何在navigation.html中提供相对路径
$("#navigationBar").load("../Shared/navigation.html");从 home.html 重定向时，未在 Test.html 中加载（由于相对路径）

如果我在这里做错了什么，请告诉我。等待您的回复。提前致谢。

【问题讨论】：

标签： javascript html jquery css navbar

【解决方案1】：

那么，为什么要使用相对路径呢？只需在链接中使用绝对路径即可。

<a class="dropdown-item" href="/folder/Test/Test2/Test2.html">Update CQ</a>

您需要更多的 javascript 来检测当前路径并从那里找出相对路径，但除非您有非常具体的理由使用相对路径，否则需要做很多工作却没有真正的收获。

【讨论】：