a:active a href not working

Question

Hi there,

I'm trying to apply the css on the a href, basically i need to apply the same style as hover when the a href has been clicked to indidate the users on which page that they are on. any ideas?

Answer 1

:active means "While being clicked on (or otherwise activated)". It doesn't mean "Linking to the current page". The closest thing CSS has to that is :target (which is for a specific point in a document, not a document as a whole).

You need to modify the markup so that you can write a selector for it. Adding a class or id using some server side technology is the usual approach.

Answer 2

a:active will work only if u click that link and open the page in new window/tab means the current page should not be changed otherwise a:active will not work....

Answer 3

To do this, you'll have to add a class (e.g.: active, selected etc.) to the anchor you wish to style. The a:active only "triggers" when you click on the link, it doesn't "remember" the page you are on.

Answer 4

As others have said, :active isn't what you want in this situation. The simplest non-server-side solution would be to go through each page and manually add a class or id to the link that is associated with the current url. For example on the "About us" page, your code might look like this:

<ul id="navigation">
    <li><a href="/index.html">Home</a></li>
    <li><a class="this_page" href="/about.html">About Us</a></li>
    <li><a href="/contact.html">Contact</a></li>
</ul>

On the contact page, you would then remove the "this_page" class from the "About Us" link and add it to the "Contact" link. All you need to do then is style the "this_page" class however you want it to look. The problem with this solution is that it requires a lot of manual edits to your code, which can be painful if you're managing a large site.

A more automated solution could use jQuery and Javascript to extract the current page from the URL and automatically add the right style or class to that link. The code could look something like this (using the same html as above):

<script type="text/javascript">
$(document).ready(function() {
    var pagePath = window.location.pathname;
    var urlArray = pagePath.split("/");
    var currentPage = urlArray[urlArray.length - 1];

    $("#navigation a[href*=currentPage]").addClass("this_page");
});
</script>

I've tested the code and it seems to work... If you want to see it in action: http://html5.phpgametest.net63.net/test/index.html