使用 Javascript 的導航欄中的遍歷問題（跨應用程序共享）

Question

由於我的應用程序在應用程序之間具有相同的導航欄，因此我想在應用程序之間實現共享導航欄。

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

這是我保存在共享文件夾中的導航。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");
});

這里的問題是

1. 不同頁面的相對路徑會有所不同，所以我需要如何在導航中提供相對路徑。html
2. $("#navigationBar").load("../Shared/navigation.html"); 從 home.html 重定向時，未在 Test.html 中加載（其原因是相對路徑）

如果我在這里做錯了什么，請告訴我。 等待您的回復。 提前致謝。

Answer 1

那么，為什么要使用相對路徑呢？ 只需在鏈接中使用絕對路徑。

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

您需要更多的 javascript 來檢測當前路徑並從那里找出相對路徑，但除非您有非常具體的理由使用相對路徑，否則需要做很多工作卻沒有真正的收獲。