Question

我知道可以用php / jquery做到这一点，但是我还没有找到有效的普通javascript解决方案。我主要是在学习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>复制并粘贴到每个页面上，但是必须有一种更好的方法来使用普通javascript吗？

Answer 1

请勿使用javascript链接样式表。最好是将样式表链接到html文件中，就像这样...

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

Answer 2

在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 -->
`;

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

Answer 3

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

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

JavaScript
尽管.innerHTML尽管通常用于呈现htmlString，但它具有一些通常被忽略的缺点。一个主要问题是它重写了目标标记中的所有内容，从而不需要处理和删除任何附加事件。请改用.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
使用.querySelector 全部 ()将所有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>

在每个页面上引导导航栏（香草javascript解决方案）

3 个答案: