1

以下是母版页中的选项卡：

<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;
}

但无论我对背景颜色做什么，它总是保持不变。如何更改所选标签的背景颜色和高度？

4

2 回答 2

1

The :active selector doesn't style the link that corresponds with the current page, but it styles the link on which is the user is currently clicking.

The :active selector is really similar to the :hover selector, which styles the link when the user is hovering over it. They are both selectors which are responding to mouse actions.

Here is a sample which shows the behavior rather obvious: http://jsfiddle.net/NuExP/

Edit after you modified the question:

Like @o.v. said, there is no selector for the current active page, so his solution to add a class to the link to indicate that it is the current active page is correct.

于 2012-04-07T08:15:51.593 回答
1

I'm assuming you're trying to change the styling of a tab that is currently selected? If so, you should be adding a css class like .current server-side to one of the tabs (also, you may need to style li element rather than the link inside it - but it all depends on the current css structure)

:active pseudo-class is used for a different purpose, you could see it applied when you, for instance, click and hold on the anchor.

于 2012-04-07T08:18:40.697 回答