Question

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

必须有一个简单的解决方案，是活动页面的活动项目。

====== EDIT ======

Naomik，你的javascript解决方案看起来最有希望，虽然我目前无法让它工作（见下面的第二个编辑）。

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

＆＃13;

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

＆＃13;

这是三个html页面之一（about.html）。我使用JS加载nav.html文件。关闭body标签之前的JS片段是naomik提供的。

＆＃13;

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

＆＃13;

============ EDIT ==========

虽然Naomik的解决方案在每个页面加载时都会导致flashing website。因此我申请了Relisora的解决方案。

由于

Answer 1

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

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

<?php $page_name = "index" ?>

然后导入导航栏

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

现在，您需要在navbar.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>

Answer 2

不要用PHP做到这一点。您可以在结束</body>代码

之前在HTML的末尾添加一些JavaScript

注意：点击代码段预览中的链接不工作原因显而易见。它们只是向您显示正确的链接将突出显示。

StackOverflow代码段从URL http:stacksnippets.net/js运行。了解这一点后，我们可以通过确保所有href="/js"个链接获得is-active类来验证我们的代码是否有效。

阅读上述通知后，点击下面的运行代码段按钮

＆＃13;
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

＆＃13;
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

在你的，你需要这个。这不能在SO片段中进行演示，抱歉。

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

Answer 3

使用导航栏制作.html文件，并将其包含在iframe

中

<iframe src="navbar.html"/>

Answer 4

这是一些示例php代码，它遍历一系列路径并构建一个菜单。

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

我已经硬编码了一条主动路径来演示输出。

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

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

nav.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，服务器端include或js include将html添加到每个页面。

Answer 5

用于引导程序

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

Answer 6

首先使用sample.php

重命名文件名sample.html

只需使用php的包含语法：

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

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

删除代码后，在所有20个页面中添加此内容。

希望这会有所帮助！

Answer 7

它可以通过php。

首先，您将所有页面创建为php文件。
创建一个文件nav_menu.php。在此页面中编码所有菜单项。
在所有页面中，菜单代码包括nav_menu.php
要激活班级，请使用$_SERVER["SCRIPT_NAME"]检查当前网址是否等于特定网址。如果相等则添加类活动。

在网页的所有页面中包含一个常见的html标题，共20页（有活动类）

7 个答案: