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

Question

Since my application had same navigation bar across application, I thought of implementing shared navigation bar across application.

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

Here is my navigation.html which I have kept inside shared folder.

 <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>

This is how I have created div in respective html files

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

When respective page visits I am loading that navigation.html file in shared.js from shared folder which I have imported in all the pages.

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

The issue here is that

1. relative paths will be different from different pages, so how do i need to provide the relative paths inside navigation.html
2. $("#navigationBar").load("../Shared/navigation.html"); is not loading inside Test.html(its beacuse of relative path) when redirect from home.html

please let me know if am doing anything wrong here. waiting for your responses. Thanks in advance.

Answer 1

So, why use relative paths at all? Just use an absolute path in your links.

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

You'll need to have some more javascript detecting the current path and figuring out the relative path from there, but that's a lot of work to do for no real gain unless you have a very specific reason to use relative paths.