全局导航标题 - 子页面点击无法关闭子页面答案

【问题标题】：Global navigation header - subpage clicks not working off of subpages全局导航标题 - 子页面点击无法关闭子页面
【发布时间】：2017-09-04 06:27:39
【问题描述】：

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

我的html头代码：

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

js头条码：

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

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

这是我的代码的运行 sn-p：

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 以便无论我在链接上的哪个页面或子页面都能正常工作？我想让系统完全自动化，无需更改每个子页面/页面的根目录。我的猜测是我需要在每个 url 前面有一个特殊的根符号，但是经过一个小时的 stackoverflow 和谷歌我找不到任何东西。

提前致谢！

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

【问题讨论】：

标签： css url href

【解决方案1】：

在你的 href 上试试这个：

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

这会上升一级（根文件夹）并到达 -> Universes -> index.html

更新

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

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-bar.js 文件。这比在每个页面上以相同的方式种植标题 html。我希望它是自动化的，所以我不需要更改每个页面来适应不同的路线。
也许来自document.location 的东西可以帮助您解决这个问题。只需 console.log 并查看每个案例，看看你的 uri 结构如何
让我们continue this discussion in chat。