javascript - 如何修复植入式页眉上的菜单？

Question

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

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

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

                <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 {列表样式:无； 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");
?>