Home / Css / Javascript / Jquery / Menu / Navigation

Why CSS :active On Link Doesn't Make The Current Page Link Highlighted?

January 02, 2023 Post a Comment

I have the following code below for list into master page

Home
Solution 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.

Solution 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.
Baca Juga
Solution 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/

Post a Comment for "Why CSS :active On Link Doesn't Make The Current Page Link Highlighted?"