如何在多個頁面上使用一個Nav Bar代碼，但是當前頁面是否突出顯示？

因此，我運行我的教會的網站，我儘量保持編碼的基礎，但是我們有季節性的頁面，我們隨時都會從網站上添加和刪除，所以我厭倦了每次更改「簡單」HTML代碼導航欄的頁面。我發現我可以在哪裏使用PHP並擁有一個代碼，但是可以使當前頁面突出顯示，即在我們的網站上，當前頁面名稱爲粗體且顏色不同。如何在多個頁面上使用一個Nav Bar代碼，但是當前頁面是否突出顯示？

我也看到JS做到這一點（Highlighting current page in the nav），但我並不真正理解如何實現這個，所以如果你認爲這對我來說可能是更好的途徑，並且可以幫助解釋如何去做，那會冷靜點。

任何幫助將是偉大的！

來源

2014-03-18 Tyler Conwell

這可以使用唯一的CSS來解決，但如果您提供了一些HTML，這將是有幫助的。 – gtr1971

取決於你想要做什麼。在我的工作網站上，我使用PHP爲我的網站上的HTML導航元素添加了額外的CSS類，這些元素將其設置爲向用戶顯示特定頁面上的用戶。 – Crackertastic

與PHP你可以看看當前頁面的名稱或變量只能在特定頁面上指定 – webeno

的id屬性添加到您的每個網頁的body標籤，就像這樣：

<body id="home"> <!-- this would be for your home page for example -->

...

<body id="about"> <!-- this would be for your about page... -->

添加相同的到你的資產淨值的li的標記，如這個：

<li id="home">Home</li> 
<li id="about">About</li>

然後在CSS文件中做這個：

body#home li#home, body#about li#about { // style of the active menu item }

來源

2014-03-18 21:08:38 webeno

大多數情況下，這是行得通的，謝謝！我在突出顯示CSS的問題，雖然，我有PHP包括一個div與id navbar。這會對CSS產生影響，但是我嘗試了一些組合，並且無法使其工作。 '

' –

體＃索引LI＃索引， \t {顏色：＃c0392b; font-weight：bold;} –

如何在多個頁面上使用一個Nav Bar代碼，但是當前頁面是否突出顯示？

回答

相關問題