1

I have the following code below for list into master page

<div id="header">
            <ul>
                <li><a href="default.aspx">Home</a></li>
                <li><a href="page1.aspx">Page1</a></li>

            </ul>
        </div>       ​

with css

#header a:hover {
    color: #AA1111;
    border-color: #AA1111;
}

#header a:active {
    color: #AA1111;
    border-color:#AA1111;
}

but the link doesn't highlight with color when page is actived .

4

3 回答 3

2

:active does not indicate that the link will be highlighted when the current page is active.

:active is the state of the link between mouse click and mouse released on the link. Try holding your mouse down on the link to see for yourself.

To set the current page's link in a different style you will need to either give the current page link a different class and target that class in your CSS.

If you're using .NET I recommend using the various CSS menu adapters / list controls that have the option of specifying the current page menu link class.

于 2012-06-14T23:07:41.773 回答
0

I think you are confusing the meaning of the pseudo-selector :active. That css rule will apply when you click on the link. But if that link brings you to a new page, the anchor is no longer active.

What you need to do is add a class to the anchor depending on what page you are on. So, in default.aspx you need to make sure that you have <a class="active" href="default.aspx">Home</a>. Then, you will need to change your css rule to #header a.active.

于 2012-06-14T23:08:22.147 回答
0

The way you may want to setup your page:

#header li {}
#header li.active a {color: #AA1111; border-color:#AA1111;} 


<div id="header">
        <ul>
            <li class="active"><a href="default.aspx">Home</a></li>
            <li><a href="page1.aspx">Page1</a></li>

        </ul>
</div>

You will need to set the active class on the li based on which page.

Demo: http://jsfiddle.net/lucuma/HT4U4/

于 2012-06-14T23:23:04.483 回答