在 20 页的网站的所有页面中包含一个通用的 html 标题(带有活动类） - Including a common html header in all pages in website of 20 pages (with active class)

假设我有 20 个导航栏项目，每个项目都链接到我网站上的不同页面。在每一页上，这 20 个项目保持不变。为了避免在所有.html文件中复制粘贴，其他解决方案建议使用 php 执行此操作。但是，例如，如何使活动菜单项亮起白色？我想避免将标题复制粘贴到所有.html文件中，因为如果我想再添加一个导航栏项，我将不得不手动将其添加到所有.html文件中。

必须有一个简单的解决方案，其中包含活动页面的活动项。

========编辑

======

Naomik，你的javascript解决方案看起来最有前途，尽管我目前无法让它工作（见下面的第二次编辑）。

我的导航栏在导航中定义.html：

<nav id="nav" class="navbar navbar-inverse">
  <div>
    <ul id="navigation" class="nav navbar-nav navbar-left">
      <li class="active"><a href="about.html" >About</a></li>
      <li><a href="services.html" >Services</a></li>
      <li><a href="pricing.html" >Pricing</a></li>
    </ul>
  </div>
</nav>

这是三个html页面之一（关于.html）。我使用 JS 加载导航.html文件。结束正文标记之前的 JS 代码段是 naomik 提供的片段。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$.get("nav.html", function(data){
    $("#nav-placeholder").replaceWith(data);
});
</script>
</head>
<body>
<!-- *** NAVBAR *** -->
<div id="nav-placeholder"></div>
<!-- *** MAIN TEXT *** -->
<h1>ABOUT</h1>
<script>
  function removeQueryString(url) {
    return url.split('?')[0]
  }
  [].forEach.call(document.querySelectorAll('a'), function(elem) {
    if (removeQueryString(elem.href) === removeQueryString(window.location.href))
      elem.classList.add('is-active')
    else
      elem.classList.remove('is-active')
  })
</script>
</body>
</html>

============编辑

=========

尽管 Naomik 的解决方案会导致每次加载页面时都会出现闪烁的网站。因此，我应用了Relisora的解决方案。

谢谢

您首先要为 20 页中的每个页面指定一个名称（或数字）。

在每个页面上，写下页面名称

<?php $page_name = "index" ?>

然后导入导航栏

<?php include 'navbar.php'; ?>

现在在导航栏中.php您想检查您是什么$page_name

<?php if ($page_name == 'index') {echo ' id="active"';} ?>

你对你拥有的每一页都这样做。

现在，您只需要在CSS中#active {}来确定样式，并且当前页面将以活动样式显示。

编辑：

现在我们可以写id="active"，我们希望它在li中，这样我们就可以使用该类：

<li<?php if ($page_name == 'index') {echo ' id="active"';} ?>>Home page</li>

不要忘记添加链接：

<li<?php if ($page_name == 'index') {echo ' id="active"';} ?>><a href="#" >Home page</a></li>

不要用 PHP 这样做。您可以在 HTML 末尾添加一点 JavaScript 在结束 </body> 标记之前

注意：由于显而易见的原因，单击代码段预览中的链接将不起作用。它们只是为了向您展示正确的链接将突出显示。

堆栈溢出代码片段从 URL http:stacksnippets.net/js 运行。知道了这一点，我们可以通过确保任何href="/js"链接获得is-active类来验证我们的代码是否有效。

阅读上面的通知后，单击下面的"运行代码片段"按钮

code {
  font-family: monospace;
  background-color: #ccc;
  padding: 0.25rem;
}
.is-active {
  background-color: blue;
  color: white;
}
a {
  display: inline-block;
  padding: 0.25rem 0.5rem;
}

<h4>
  This window is currently at url:<br>
  <code>http://stacksnippets.net/js</code>
</h4>
<a href="/js">js</a>
<a href="/html">html</a>
<a href="/php">php</a>
<p>The <b>js</b> link above gets the is-active CSS class because it matches the window's current pathname</p>
<script>
  [].forEach.call(document.querySelectorAll('a'), function(elem) {
    if (elem.pathname === window.location.pathname)
      elem.classList.add('is-active')
    else
      elem.classList.remove('is-active')
  })
</script>

请注意，原始 HTML 中的每个 a 元素都没有任何 class 属性。在 JS 运行后，请注意，只有 <a href="/js">js</a> 链接会自动获得 is-active CSS 类。

<小时 />

这是适合您的jQuery解决方案。

code {
  font-family: monospace;
  background-color: #ccc;
  padding: 0.25rem;
}
.is-active {
  background-color: blue;
  color: white;
}
a {
  display: inline-block;
  padding: 0.25rem 0.5rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>
  This window is currently at url:<br>
  <code>http://stacksnippets.net/js</code>
</h4>
<a href="/js">js</a>
<a href="/html">html</a>
<a href="/php">php</a>
<p>The <b>js</b> link above gets the is-active CSS class because it matches the window's current pathname</p>
<script>
  function highlightActiveLinks() {
    $('a').filter(function(idx, elem) {
      return elem.pathname === window.location.pathname
    }).addClass('is-active')
  }
  
  highlightActiveLinks()
</script>

在你的身上，你将需要这个。抱歉，这不能在 SO 代码段中演示。

$.get('nav.html', function(data) {
  // ...
  highlightActiveLinks()
})

仅

使用导航栏创建一个.html文件并将其包含在iframe中

<iframe src="navbar.html"/>

下面是一些示例 php 代码，它遍历路径数组并构造菜单。

如果

函数被赋予一个活动路径（当前路径）作为输入，它将与每个路径进行比较，如果它们匹配，则会向链接添加一个类。

我硬编码了一个活动路径来演示输出。

您可以将所有这些捆绑到一个名为 nav.php 的文件中，并将其包含在每个页面上。

<?php
     include 'includes/nav.php';
?>

导航.php：

<?php
$paths = array(
    '/foo/',
    '/foo/bar/',
    '/foo/baz/',
    );
function nav($paths, $active_path = null) {
    $o = '';
    foreach($paths as $path) {
        $a_class = $active_path == $path ? 'active' : '';
        $o .= "<a class='$a_class' href='$path'>$path</a><br />'n";
    }
    return $o;
}
$active_path = strtok($_SERVER["REQUEST_URI"], '?');
$active_path    = '/foo/bar/';
?>
<?php echo nav($paths, $active_path); ?>

输出：

<a class='' href='/foo/'>/foo/</a><br />
<a class='active' href='/foo/bar/'>/foo/bar/</a><br />
<a class='' href='/foo/baz/'>/foo/baz/</a><br />

然而，就个人而言，我更喜欢使用 javascript 添加活动类。在这种情况下，您可以构建一个 html 片段并利用 php include、服务器端包含或 js 包含将 html 添加到每个页面。

用于引导

<a class="nav-link <?php if ($page_name == 'index') {echo "active";} ?> href="index.php">Home</a>

或速记

<a class="nav-link <?php echo ($page_name == 'index') ? "active" : "";?> href="index.php">Home</a>

首先用 sample

重命名文件名 sample.html.php

只需使用 PHP 的包含语法：

    <?php include("sample.php"); ?>
    or
    <?php require("sample.php");?>

删除代码后，将其添加到所有 20 页中。

希望这会有所帮助！

它可以通过 php 来完成。

首先，将所有页面创建为 php 文件。
创建一个文件作为nav_menu.php。在此页中，对所有菜单项进行编码。
在所有页面中，菜单代码都包含nav_menu.php
要提供活动类，请使用$_SERVER["SCRIPT_NAME"]检查当前 url 等于特定 url。如果相等，则添加活动类。