Why CSS :active on link doesn't make the current page link highlighted?

问题

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 .

回答1:

: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.

回答2:

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.

回答3:

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/

来源：https://stackoverflow.com/questions/11042535/why-css-active-on-link-doesnt-make-the-current-page-link-highlighted

标签

javascript

jquery

css

navigation