導航菜單突出顯示活動頁面？

我在我的導航菜單中有三個選擇。投資組合，關於和聯繫。這是它的標記。導航菜單突出顯示活動頁面？

HTML

<div id="nav"> 
<a class="homePage" href="/index/0-1">Portfolio</a> 
<a class="aboutPage" href="/index/0-2">About</a> 
<a class="contactPage" href="/index/0-3">Contact</a> 
</div>

CSS

#nav { 
    text-align: center; 
    text-decoration: none; 
    margin-top: 20px; 
    padding-top: 31px; 
} 
#nav a { 
    text-decoration: none; 
    color: #FFFFFF; 
    font-family: maven; 
    border-bottom: #FFFFFF 2px solid; 
    padding-bottom: 5px; 
    font-size:20px; 
} 
#nav a:hover { 
    text-decoration: none; 
    color: #ff6464; 
    border-bottom: #ff6464 2px solid; 
}

現在，這裏是我想要做什麼的例子：

主頁上（這是組合），只要您在該頁面上，導航菜單中的「組合」就會保持＃ff6464的顏色。我會如何去做這件事？

來源

2013-05-15 Zevoxa

http://stackoverflow.com/questions/9767289/highlight-the-current-page-in-the-menu-bar?rq=1 – apaul

創建一個.selected類並將其應用於當前頁面。讓它覆蓋你想要的顏色。

HTML

<div id="nav"> 
<!-- add a new class to portfolio/whatever the current page is --> 
<a class="homePage selected" href="/index/0-1">Portfolio</a> 
<a class="aboutPage" href="/index/0-2">About</a> 
<a class="contactPage" href="/index/0-3">Contact</a> 
</div>

CSS

#nav {text-align:center; text-decoration:none; margin-top:20px; padding-top: 31px;} 
#nav a {text-decoration:none; color:#FFFFFF; font-family:maven; border-bottom:#FFFFFF 2px solid; padding-bottom:5px; font-size:20px;} 
#nav a:hover {text-decoration:none; color: #ff6464; border-bottom: #ff6464 2px solid;} 
#nav a.selected {color: #ff6464;} /* <---- new style! */

來源

2013-05-15 02:41:29 Jace

但這使得它突出顯示，不管是什麼？當我到達「關於」時，「主頁」仍然突出顯示。 – Zevoxa

是的。您需要現在去將每個頁面的「selected」類應用到正確的元素。你已經將問題標記爲'html'和'css'，並且沒有提供更多的信息。我不知道你是如何提供這些網頁的，沒有人會這樣做，所以我們無法幫到你。如果您使用的是模板系統，那麼您需要動態設置當前頁面鏈接的類。如果您使用的是靜態HTML，那麼您需要手動爲每個頁面進行設置。 – Jace

我不知道爲什麼你分配的種類在這裏所有的網頁時，有沒有適用於他們在這裏的樣式表（我刪除如果你在其他用途中使用它們，請不要理會）。由於ByteBlast和Jace已經回答，您可以爲該活動頁面分配一個類。所以，你的HTML可能是：

<div id="nav"> 
    <a class="selected" href="/index/0-1">Portfolio</a> 
    <a href="/index/0-2">About</a> 
    <a href="/index/0-3">Contact</a> 
</div>

然後你的CSS將是（通過刪除不必要的樣式）：

#nav { 
    text-align: center; 
    margin-top: 20px; 
    padding-top: 31px; 
} 
#nav a { 
    text-decoration: none; 
    color: #FFFFFF; 
    font-family: maven; 
    border-bottom: #FFFFFF 2px solid; 
    padding-bottom: 5px; 
    font-size:20px; 
} 
#nav a:hover { 
    color: #ff6464; 
    border-bottom: #ff6464 2px solid; 
} 
#nav a.selected { 
    color: #ff6464; 
}

UPDATE：

在您的投資組合頁面：

<div id="nav"> 
    <a class="selected" href="/index/0-1">Portfolio</a> 
    <a href="/index/0-2">About</a> 
    <a href="/index/0-3">Contact</a> 
</div>

在您的關於頁面

<div id="nav"> 
    <a href="/index/0-1">Portfolio</a> 
    <a class="selected" href="/index/0-2">About</a> 
    <a href="/index/0-3">Contact</a> 
</div>

，並在您的聯繫人頁面

<div id="nav"> 
    <a href="/index/0-1">Portfolio</a> 
    <a href="/index/0-2">About</a> 
    <a class="selected" href="/index/0-3">Contact</a> 
</div>

來源

2013-05-15 03:00:21

是的，但是當他們轉到關於Page時，投資組合仍將突出顯示。 – Zevoxa

嗯，這是kindaeasy。在頁面投資組合中，您將類別設置爲「已選擇」，並在關於頁面中指定「已選擇」類別並從投資組合中刪除類別，請參閱我的更新。 –

導航菜單突出顯示活動頁面？

回答

相關問題