Question

我一直在使用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"联系起来。

以下是我的代码的运行代码段：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我如何设置href，以便无论我在链接上的哪个页面或子页面都能正常工作？我想让系统完全自动化，无需为每个子页面/页面更改根目录。我的猜测是我需要在每个网址前面都有一个特殊的根符号，但经过一小时的stackoverflow＆amp;谷歌，我找不到任何东西。

提前致谢！

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

Answer 1

在你的href上试试这个：

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

这上升一级（根文件夹）并转到 - ＆gt;宇宙 - ＆gt;的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>

全局导航标题 - 子页面点击无法处理子页面

1 个答案: