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

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中的某种形式的标识开始，例如唯一的'class'或'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> 

然后在某处内容文件（perhpas你的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?）。也许检查你的编辑的喜好处理空白和制表符空间等