Fatal编程技术网
  • javascript/
  • Javascript 使用引导在多个html页面上显示导航栏

Javascript 使用引导在多个html页面上显示导航栏

javascript html css twitter-bootstrap twitter-bootstrap-3

Javascript 使用引导在多个html页面上显示导航栏,javascript,html,css,twitter-bootstrap,twitter-bootstrap-3,Javascript,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我一直在寻找这个问题的答案有一段时间了。我正在使用Bootstrap框架创建一个公文包网站。我已使用固定顶部导航栏完成了index.html： 此导航栏具有指向“bio”页面、“projects”下拉菜单和“contact”页面的链接。我已经为每个页面创建了单独的html页面（例如：我有index.html、bio.html、contact.html、video.html、design.html等）。但是，当我按下链接时，它们不会显示导航栏，也不会显示任何其他格式 我有以下用于图形设计html

我一直在寻找这个问题的答案有一段时间了。我正在使用Bootstrap框架创建一个公文包网站。我已使用固定顶部导航栏完成了index.html：

此导航栏具有指向“bio”页面、“projects”下拉菜单和“contact”页面的链接。我已经为每个页面创建了单独的html页面（例如：我有index.html、bio.html、contact.html、video.html、design.html等）。但是，当我按下链接时，它们不会显示导航栏，也不会显示任何其他格式

我有以下用于图形设计html的代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Graphic Design</title>
</head>
<body>
     <h1>Graphic Design</h1>
    <p>Creating</p>
</body>
</html>


平面设计
平面设计
创造
这就是我们所看到的：

我想知道是否有一种方法可以使项目中的每个HTML页面上的导航栏保持一致

我已经看到了这一点：但是我很难使用jQuery加载它

我也看到了这一点：但我不想使用PHP

谢谢您的时间。

为了在每个页面中包含您的
导航栏
，您必须使用
php
或
javascript
。否则，您只需在每个页面中复制粘贴html标记。试试这两个步骤--

HTML

<div class="container-fluid" id="footer">

</div>
首先，我祝贺你的提问。
它解决了编程中的一个基本需求和最重要的原则：，这是开发和实现大多数常见web技术的主要原因，例如
php
或
CSS
（可以通过
LESS
或
SASS
进一步干燥）

例如，
php
之所以被发明并立即被广泛采用，主要是因为这一“非常酷的新（当时）功能”：您所要做的就是将扩展名从
.html
更改为
.php
，并且您可以使用以下功能包括其他部分：

<?php include "part.html"; ?>
通常被称为模板/组件加载，这也是使用
JavaScript
的常见任务。相当多的图书馆提供这种服务。例如，
jQuery
提供了，而
AngularJS
允许您使用s来包含s，可以定义为内联的或外部的
HTML
。事实上，所有包依赖关系管理器和所有框架都以某种形式提供它，因为今天的web没有可重用的组件是不可想象的

如果您想找到更多选项，我建议您开始搜索
html
、
include
、
模板
、
加载
和
组件的组合

请注意，大多数
JavaScript
库都会带来开销。然而，最流行的方法通常提供一些灵活性，允许您仅选择性地构建所需的功能

如果（以及何时）微软使用
标签提交给万维网联盟，则包含模板很可能成为核心
HTML
的一部分。


目前，可以使用
AngularJS
s
键入：“E”
指令来实现这一点。
由于问题的标题吸引了对引导导航栏感兴趣的人，下面是导航栏的演示。假定同时使用引导和jQuery

我的主要观点是展示如何正确激活导航栏链接，每个页面中的导航栏链接必须不同

nav bar.html


<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
   <a class="navbar-brand" href="#">
     <img alt="Brand" src="icon.png">
     <span class=px-2>My Site</span>
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav ml-auto">
         <li class="nav-item ">
            <a class="nav-link" href="#">Home Page </a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Page1</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Page2</a>
         </li>
      </ul>
   </div>
</nav>


现在剩下的是以一个
div
开始每页，导航条将加载到该div中：


<body>
  <div id="common-navbar"></div>  





谢谢。我现在正在尝试。为了解决您关于复制和粘贴html标记的第二个问题，我确实复制了整个index.html代码并将其传递到了其他页面中，但它们没有正确显示/与索引相同。Greate希望这能有所帮助@艾比：当你复制加价时，不要复制整个加价。只需复制标题部分。另外，不要忘记包括必要的样式css表。但是jquery是更好的方法。@新手：你的答案没有错。我相信我们有一个巨魔潜伏在周围，因为我也被否决了。阻止我对您的答案进行投票的原因是您没有指定它使用jQuery。这一点非常重要，没有jQuery它将无法工作。我也在尝试做同样的事情——尝试上面的建议是行不通的。我在页脚上方的主HTML文件中有javascript。它应该去别的地方吗？我很想知道投票被否决的原因，以及被否决的选民到底认为我的答案有什么错误或不完整之处。我很乐意改进它。我喜欢这个答案如何解决问题的核心。我还会在这里列出一些静态站点生成器。然而，我认为值得注意的是，与PHP和SSG相比，所有javascript解决方案目前都需要额外的库和HTTP请求，从而带来了开销-（不是反对票）这看起来很明显，但PHP是一种服务器端功能，为了让这种技术发挥作用，您必须启用它。安装和配置PHP很容易，可以在其他地方找到说明。Javascript在客户端（浏览器）上运行，默认情况下应该启用它，并且不需要服务器配置。对于PHP产品页面，请确保您的托管服务支持PHP（其中许多支持PHP）。

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
   <a class="navbar-brand" href="#">
     <img alt="Brand" src="icon.png">
     <span class=px-2>My Site</span>
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav ml-auto">
         <li class="nav-item ">
            <a class="nav-link" href="#">Home Page </a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Page1</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Page2</a>
         </li>
      </ul>
   </div>
</nav>



<script type="text/javascript">
  window.onload = function(){
      $.get("navbar.html", function(data){
          $("#common-navbar").html(data);
          $('.navbar-nav').find('li:nth-child(2)')
            .addClass('active')
            .find('a').append('<span class="sr-only">(current)</span>');
      });
  }
</script>



<body>
  <div id="common-navbar"></div>