如何修复植入的 header 上的菜单？

Question

所以我在我的网站上工作，每个页面都包含 header、页脚和菜单的副本。我正在切换它以从他们自己的 html 文件中提取页脚和 header/menu。这就是我正在使用的。在 page.php 我有：

<?php include('header.html'); ?>

在 header.html 中，我有元标记、标题、徽标和菜单。您可以查看以下菜单代码：

                <ul id="nav" class="main">
                    <li><a href="index">Home</a></li>
                    <li><a href="about">About Us</a></li>
                    <li><a href="contact" class="active">Contact</a></li>
                </ul>

这并不重要，但这是我的 css： .nav {list-style:none; margin:0 0 1.5em 0;}

/*Add a class of centred/centered to create a centred nav.*/

#nav.main{
float: right;
text-align:center;
margin: 0 0 0 0;
padding: 0 0;
font-family:'Oswald', Arial, sans-serif;
}
#nav.main li {display:inline; float:none;}

#nav.main a{
display:inline-block;
padding: 0.6em 1.2em;
background-color: #EFEFEF;
border-radius: 10px;
border-right: 1px solid #bbb;
border-bottom: 2px solid #bbb;
color: #666;text-decoration:none; 
text-transform:uppercase; 
text-shadow: 1px 1px 1px #fff;
font-size: 1.1em;
margin: 0 0 0em 0;  
}
#nav.main a:hover{color: ; text-shadow: 1px 1px 0px #fff; background-color: #ffd27f; }

#nav.main a.active{color: #fff; text-shadow: 1px 1px 1px #333; font-weight: bold; background-color: #FF8307; letter-spacing: 1px;}

#nav li span {display: block; font-size: 10px; color: #666; text-shadow: none; line-height: 8px;}

如果我将其设置为所有页面的活动状态，所有页面都将显示为联系人处于活动状态。我如何才能让它知道我在哪个页面上并自己做？我在想也许可以使用 JavaScript 但我该怎么做呢？

注意：这只是一个简单的 php 和 html 站点。

编辑：

我按照@barmar 所说的做了，但知道它有效，但菜单失去了填充和对齐，看起来很奇怪，这是为什么？我附上了之前和之后的图像。

编辑编辑：我的旧菜单看起来像上面的代码。这是我的新菜单，其中的样板文件仍然出现错误，如上图 2 所示。

<?php 
function show_header($this_page) {
    $navs = array('index' => 'Home', 'media' => 'Pictures & Videos', 'about' => 'About Us', 'donate' => 'Donate', 'contact' => 'Contact');
    ?>
    <!-- boilerplate stuff here -->
    <ul id="nav" class="main">
    <?php
    foreach ($navs as $href => $text) {
        $active = $href == $this_page ? "class='active'" : '';
        echo "<li><a href='$href' $active>$text</a></li>";
    }
    ?>
    </ul>
    <!-- more boilerplate -->
    <?php
}
?>

Answer 1

不要使用硬编码的 HTML 文件，而是使用 PHP 脚本，并让它定义一个函数。

header.php:

function show_header($this_page) {
    $navs = array('index' => 'Home', 'about' => 'About Us', 'contact' => 'Contact');
    ?>
    <!-- boilerplate stuff here -->
    <ul id="nav" class="main">
    <?php
    foreach ($navs as $href => $text) {
        $active = $href == $this_page ? "class='active'" : '';
        echo "<li><a href='$href' $active>$text</a></li>";
    }
    ?>
    </ul>
    <!-- more boilerplate -->
    <?php
}

那么页面将包含：

<?php require("header.php");
      show_header("contact");
?>

Answer 2

有很多方法可以做到这一点，但由于这个问题被标记为 "javascript"，最简单的方法是在 ul#nav 的每个 li-tag 中以某种形式的标识符开头，例如独特的 'class' 或 'id' 属性。然后，您可以 'target' 具有脚本函数的特定元素，并从内容文件中的其他位置调用该函数。像...

/* CSS : style anchor-tags if li-tag has class 'active' */
#nav li.active a {
    text-decoration:underline;
}


/* JavaScript : in the head-tag of 'header.html' */
function setActive(activeElement) {
    var navlist = document.getElementById('nav');
    var listtags = navlist.getElementsByTagName('li');
    var listLength = listtags.length;
    for (var i = 0; i < listLength; i++) {
        if (listtags[i].id === activeElement) {
            listtags[i].setAttribute('class','active');
        }
    }
}

/* OR JQuery : in the head-tag of 'header.html' */
function setActive(activeElement) {
    $('#'+activeElement).addClass('active');
}
// (this is why we love JQuery !)

/* HTML : in the body-tag of 'header.html' */
<ul id="nav" class="main">
    <li id="home"><a href="index">Home</a></li>
    <li id="about"><a href="about">About Us</a></li>
    <li id="contact"><a href="contact">Contact</a></li>
</ul>

然后在您的内容文件中的某处（也许您是 php-包括 'home.html'、'about.html'、and/or 'contact.html' 之类的内容）调用如此运作...

<script>
    window.onload = function() {setActive('about')};
</script>

...使<li id="about" class="active"> ... </li>等

重新更新问题： 之前你的 <li> 标签可能在单独的行中，在文档中用一些白色填充 space and/or tab-spaces，现在你的 <li> 标签不间断地相互对接。尝试在...

末尾添加一个额外的 space

echo "<li><a href='$href' $active>$text</a></li> "; // <-- extra space

...或添加换行符 "\n"（参见 Whosebug: How to add a line break within echo in PHP?）。并且也许检查您的编辑器对处理 whitespace 和 tab-spaces 等的偏好

如何修复植入的 header 上的菜单？

How can I fix the menu on the implanted header?

html

javascript

css

php

menu