CODEWITHSUNDEEP
cssasp.net-mvc
petko_stankoski
petko_stankoski

Reputation: 10713

MVC Styling the tabs

Here are the tabs in the master page:

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

And here is the css:

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

But no matter what I do to background-color, it always remains the same. How to change the background color and the height of the selected tab?

Upvotes: 1

Views: 1072

Answers (2)

Jesse van Assen
Jesse van Assen

Reputation: 2290

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.

Upvotes: 1

Oleg
Oleg

Reputation: 24988

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.

Upvotes: 1

Related Questions