每个页面上的引导导航栏（vanilla javascript 解决方案）答案

【问题标题】：bootstrap navbar on every page (vanilla javascript solution)每个页面上的引导导航栏（vanilla javascript 解决方案）
【发布时间】：2019-05-23 18:35:20
【问题描述】：

我知道使用 php/jquery 可以做到这一点，但我还没有找到一个有效的 vanilla javascript 解决方案。我在 vanilla javascript 中这样做主要是作为一种学习经验，所以请不要使用 php/jquery。

这就是我所拥有的，基于this 的答案。

//load_essentials.js
document.getElementById("myNav").innerHTML =
	"<ul id='navLinks'>"
	+ "<li><a href='index.html'>Home</a></li>"
	+ "<li><a href='about.html'>About</a>"
	+ "<li><a href='donate.html'>Donate</a></li>"
	+ "</ul>";

<!--index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> NavBar </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <nav id="myNav"></nav>
    This is the content in the home page.
    <script src="load_essentials.js"></script>
</body>

</html>

这是 about.html:

<!--about.html-->
    <nav id="myNav"></nav>   
    <script src="load_essentials.js"></script>
    Hello World, this is my about me page!

问题是当有人单击 index.html 中导航栏中的 About 链接时，about.html 中的导航栏没有引导样式（蓝色文本），它只是一个纯黑色的无序列表。我可以将 index.html 中的 <head></head> 复制并粘贴到每个页面上，但是在 vanilla javascript 中必须有更好的方法来做到这一点？

【问题讨论】：

最好不要使用 javascript 在每个页面上动态加载您需要的外部样式表。您应该在每一页的head 中包含link。像Pug 这样的模板引擎可以轻松跨多个页面进行管理。
您的 javascript (load_essentials) 似乎可以工作 - 它已成功将导航添加到文档中。什么不起作用似乎是样式表。您能否具体说明您希望看到的样式？ @sean 我没有看到他们在哪里使用 javascript 来加载外部样式表。
@AlexMA 也许我误读了这个问题。此外，您需要 nav 元素及其子元素上的引导类，以便应用引导样式。
问题是当有人点击 index.html 导航栏中的 About 链接时，about.html 中的导航栏没有引导样式（蓝色文本），它只是一个纯黑色的无序列表。跨度>

标签： javascript jquery html css

【解决方案1】：

在 Essentials.js 中执行以下操作：

document.getElementById("myNav").innerHTML =
    `<ul id='navLinks'>
         <li><a href='index.html'>Home</a></li>
         <li><a href='about.html'>About</a>
         <li><a href='donate.html'>Donate</a></li>
    </ul>`;

document.querySelector("head").innerHTML += 
`
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- you might want to add some other libraries to load here -->
`;

并将其加载到每个页面中。

【讨论】：

【解决方案2】：

不要使用 javascript 链接样式表。最好像这样在 html 文件中链接样式表...

<link rel="stylesheet" type="text/css" href="yourname.css">

【讨论】：

【解决方案3】：

元数据标签
希望您知道每个页面都需要下载某些文件才能使用 Bootstrap。请特别注意每个 <link> 和 <style> 和 <script> 标签在演示中的内容和位置。您必须完全熟悉外部文件以及不属于流程的内联标签（不可见且不影响布局）。

HTML/CSS
Bootstrap 90% 的布局和行为是面向类的。您可以放心地假设布局中的任何标签都需要一个 BS 类才能对其进行样式设置。 OP 中提供的 htmlString 没有任何类，因此它当然不会按预期出现。

JavaScript
尽管通常用于渲染 htmlString，.innerHTML 有一些通常被忽视的缺点。一个主要问题是它重写了目标标签中的所有内容，这需要不必要的处理和删除任何附加事件。请改用.insertAdjacentHTML()——它不会破坏内容加上可以由第一个参数确定的htmlString的位置：

document.querySelector('.navbar').insertAdjacentHTML(position, htmlString)

/**@ Param: [position] "beforebegin" - in front of .navbar as next sibling
                       "afterbegin" - within .navbar as first child
                       "beforeend" - within .navbar as last child
                       "afterend" - behind .navbar as previous sibling
*/

不要用#id 来限制自己，还有其他方法可以通过.class、[attribute] 和tag 来访问标签。使用 .querySelector() 通过任何 CSS/jQuery 选择器选择单个标签。

   `<nav id='nav1' class='navbar' name='navigation'></nav>
  // by #id
  document.querySelector('#nav1')
  // by .class
  document.querySelector('.navbar')
  // by [attribute]
  document.querySelector('[name=navigator]')
  // by tag
  document.querySelector('nav')

如果有多个选择器（有效 HTML 中的 #id 除外），qS() 将获得页面上的第一个选择器。如果您需要定位除第一个标签以外的标签，您需要使用qS() 执行以下操作之一（例如访问第二个nav 标签）：

手动或动态添加不同的属性（推荐使用 .class）
更改选择器

document.querySelector("nav:nth-of-type(2)")
使用 DOM 属性

document.querySelector('ul').parentElement
使用.querySelectorAll()将所有nav标签收集到一个NodeList

var navs = document.querySelector('nav') 然后navs[1]

演示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title> NavBar </title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
  <style>
    /* extra styles may be added here */
  </style>
</head>

<body>

  <nav class="navbar navbar-expand-sm bg-dark"></nav>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <script>
    document.querySelector(".navbar").insertAdjacentHTML('beforeend', `<ul class='navbar-nav'>
<li class="nav-item">
  <a class='nav-link' href='index.html'>Home</a>
</li>
<li class="nav-item">
  <a class='nav-link' href='about.html'>About</a>
</li>
<li class="nav-item">
  <a class='nav-link' href='donate.html'>Donate</a>
</li>
</ul>`);
  </script>

</body>

</html>

【讨论】：

about.html 应该是什么样子？
当我单击指向 about.html 的链接时，about.html 页面没有导航栏。我只是对如何将导航栏保持在多个页面上感到困惑
about.html 是一个完全不同的页面，在每个页面上使用相同的代码。这可以在服务器端自动进行，但这超出了这个模糊的误导性问题的范围。
我看不出它是多么含糊/误导。标题说“每一页上的导航栏”。我在点击 about.html 时讨论了这个问题。
OP 中提供的代码与跳转到其他页面无关。 JavaScript merey 创建没有样式的 nav 的子项。如果您要在任何页面上运行该代码，则不会有任何样式。您需要将此答案中提到的所有内容加载到每个页面上，以便您拥有一个功能齐全且样式齐全的 Bootstrap 页面。真正的意义在于，除了这些所需的文件，您还需要将 BS 类添加到 <body> 中的每个标签（<script> 除外）