如何修復植入式標題上的菜單？

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?）。也許檢查你的編輯的喜好處理空白和製表符空間等