全局导航 header - 子页面点击不起作用

Question

我一直在使用 github 个页面到运行我的网站。我目前正在尝试开发一个全局 header ，可以在一个js文件中进行调整并在任何地方反映出来。问题是，当运行从另一个子页面转到子页面时，我遇到 url link 问题。我希望能够调用一个 js 文件，并让 links 工作 ，无论根是什么。

我的htmlheader代码：

<!--Set the div for the header bar. Import a js file that runs a specific script to set a universal header amongst all the pages.-->
    <div id="header-bar"></div>
<!--Please note, on subpages the entered src is ../javascript/header-bar.js to adjust to location.-->
    <script src="javascript/header-bar.js"></script>

jsheader-bar代码：

var headerbar = document.getElementById("header-bar");
//This sets each page/subpage to be the exact same header.
headerbar.innerHTML = '<div class="dropdown"><button class="dropbtn">Games</button><div class="dropdown-content"><a href="universes/index.html">Universe Generator</a><a href="#">Coming soon...</a></div><div class="dropdown"><button class="dropbtn">Tools</button><div class="dropdown-content"><a href="nameGenerator/index.html">Name Generator</a><a href="#">Coming soon...</a></div></div>';

我相信正在发生的事情是，无论何时在这些子页面之一上，我都会 link 将自己设置为 "nameGenerator/nameGenerator/index.html" 而不是 "nameGenerator/index.html"。

这是我的代码的运行ning 片段：

var headerbar = document.getElementById("header-bar");

headerbar.innerHTML = '<div class="dropdown"><button class="dropbtn">Games</button><div class="dropdown-content"><a href="universes/index.html">Universe Generator</a><a href="#">Coming soon...</a></div></div><div class="dropdown"><button class="dropbtn">Tools</button><div class="dropdown-content"><a href="nameGenerator/index.html">Name Generator</a><a href="#">Coming soon...</a></div></div>';

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 20px 20px 0px 0px;
  min-width: 160px;
}
.dropdown {
  position: relative;
  display: inline-block;
  padding: 0px 2px;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

#header-bar {
 background-color: #509b53;
}
#header-bar:hover {
 background-color: #66ba69;
}

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="css/global.css"/>
 </head>
    <body>
  
  <!--Set the div for the header bar. Import a js file that runs a specific script to set a universal header amongst all the pages.-->
  <div id="header-bar"></div>
  <script src="javascript/header-bar.js"></script>
  
 </body>
</html>

我如何设置 href，以便无论我在 links 上的哪个页面或子页面都能正常工作？我想让系统完全自动化，而不需要为每个 subpage/page 更改根。我的猜测是我需要在每个 url 前面有一个特殊的根符号，但是经过一个小时的 Whosebug & google 我找不到任何东西。

提前致谢！

旁注：我不能只放置整个本地 url 文件，因为当我导入到 github 时，我必须从本地 url 全部更改它] 到 github url.

Answer 1

在你的 href 上试试这个：

href="../universes/index.html"

这向上一级（根文件夹）到达 -> universes -> index.html

已更新

根据您的进一步评论，这是一个可行的解决方案：

var href = document.location.href;
var current_dir = href.substr(0, href.lastIndexOf('/'));

这应该适用于任何目录：

headerbar.innerHTML = '<a href="'+current_dir+'/index.html">Universe Generator</a>

全局导航 header - 子页面点击不起作用

Global navigation header - subpage clicks not working off of subpages

css

url

href