如何修复植入标题上的菜单？

Question

所以我在我的网站上工作，每个页面都包含页眉、页脚和菜单的副本。我正在切换它以从自己的 html 文件中提取页脚和页眉/菜单。这就是我正在使用的。 在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 {列表样式：无；边距：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 中使用某种形式的标识符开始，例如唯一的“类”或'id' 属性。然后，您可以使用脚本函数“定位”特定元素，并从内容文件中的其他位置调用该函数。比如……

/* 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”和/或“contact.html”这样的东西）调用函数......

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

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

---

重新更新的问题： 之前您可能将 <li> 标记放在单独的行上，在文档中用一些空格和/或制表符填充，现在您的 <li> 标记对接了互相反对，没有休息。尝试在末尾添加一个额外的空格...

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

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