Javascript 我怎样才能修改标题上的菜单？

所以我在我的网站上工作，每个页面都包含一份页眉、页脚和菜单的副本。我将其切换为从它们自己的html文件中提取页脚和页眉/菜单。这就是我用的。 在

page.php

中，我有：

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

这并不重要，但这是我的css： .nav{列表样式：无；边距：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
}
?>

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

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
}

function show_头（$this_页）{
$navs=array（'index'=>'Home'，'about'=>'about Us'，'contact'=>'contact'）；
?>

有很多方法可以做到这一点，但由于这个问题被标记为“javascript”最简单的方法是从

ul#nav

中每个li标记中的某种形式的标识符开始，例如一个唯一的“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>

/*CSS:如果li标记具有“活动”类，则设置锚定标记的样式*/
#李海军{
文字装饰：下划线；
}
/*JavaScript:在“header.html”的head标记中*/
函数setActive（activeElement）{
var navlist=document.getElementById（'nav'）；
var listtags=navlist.getElementsByTagName（'li'）；
var listLength=listtags.length；
对于（变量i=0；i

然后在您的内容文件中的某个地方（假设您是php，包括“home.html”、“about.html”和/或“contact.html”）调用该函数，从而

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

window.onload=function（）{setActive（'about'）}；

…使

等


重新更新的问题：以前您的
标签可能在单独的行中，在文档中填充一些空格和/或制表符，现在您的
标签不间断地对接在一起。请尝试在末尾添加额外的空格

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

echo“
”；//非常感谢它的工作。上帝保佑你！！你可以查看我的网站，尽管我仍在做更改，但它们还没有启动。复活节快乐！@BarmarI实际上有一个问题我认为我可以解决，但无法解决。这个php菜单的编码实际上打乱了我的菜单填充和对齐。有一个修复方法可以保持原始的对齐和填充。Thanks@barmarI必须查看更多详细信息。导航菜单周围的样板文件一定有一些不同。我在问题中添加了更多详细信息。我添加了我现在拥有的确切代码，上面是我拥有的确切代码。如果你还需要什么，请告诉我。我不了解整个样板文件。它是如何工作的。因为它也正在删除我的网站上还有一些关于这个新菜单代码的东西。谢谢。@barmaralso这是旧版本的，这是新版本的，你可以看到，如果你调整窗口的大小，新版本会破坏移动菜单，而旧版本完全可以使用。
<script>
    window.onload = function() {setActive('about')};
</script>

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