2012-04-07 107 views
1

這裏是在母版頁選項卡:MVC樣式的標籤

<nav> 
    <ul id="menu"> 
     <li><%: Html.ActionLink("Home", "Index", "Home")%></li> 
     <li><%: Html.ActionLink("About", "About", "Home")%></li> 
    </ul> 
</nav> 

這裏是CSS:

ul#menu li.selected a { 
    background-color: #a6e2a6; 
    color: #000; 
} 

但無論我做什麼背景色,它始終保持一樣。如何更改背景顏色和選定選項卡的高度?

回答

1

:active選擇器不對與當前頁面相對應的鏈接進行樣式設置,但會對用戶當前正在單擊的鏈接進行樣式設置。

:active選擇器與:hover選擇器非常相似,該選擇器在用戶將鼠標懸停在選擇器上時設定鏈接的樣式。它們都是響應鼠標操作的選擇器。

下面是一個示例,顯示的行爲相當明顯:你修改的問題http://jsfiddle.net/NuExP/

編輯後:

像@ o.v。表示,當前活動頁面沒有選擇器,所以他的解決方案向鏈接添加一個類以表明它是當前活動頁面是正確的。

+0

我編輯了這個問題。請看看它。 – 2012-04-07 08:16:59

+0

@JessevanAssen:對於OP的快速指針+1,雖然與':hover'的比較可能被看作是令人困惑的 – 2012-04-07 08:20:13

+0

我添加了它,因爲兩個選擇器都響應鼠標操作,但現在我看到它可能會令人困惑。我將它添加到答案中。 – 2012-04-07 08:22:58

1

我假設你正試圖改變當前選中的選項卡的樣式?如果是這樣,你應該添加一個類似.current服務器端的css類到其中一個選項卡(也可能需要樣式li元素而不是其中的鏈接 - 但這一切取決於當前的css結構)

:active僞類用於a different purpose,例如,當您單擊並按住錨點時,可以看到它適用。

+0

「選擇」怎麼樣? – 2012-04-07 08:19:55

+0

@Scree:當前沒有本地邏輯來使錨僞線類型的src與當前文檔位置匹配。你最終必須添加一個類到服務器端(最好)的「當前」選項卡或在客戶端使用JavaScript(通常皺眉) – 2012-04-07 08:23:48