a:active a href not working

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?

---

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

---

The :active pseudo-class means that an element is being activated by the user. This is triggered when the link is clicked, but it doesn't tell you what page the user is currently on.

The tedious, manual solution

You could manually go through each page on your website, and in your navigation, add a class to the current page. For example, on the "About Us" page, the navigation mightlook like this:

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

On the contact page, you would then remove the current-page class from the "About Us" link and add it to the "Contact" link. 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.

An automated client-side solution

A better solution might use Javascript to parse the current page from the URL and automatically add the right class to the corresponding link. The jQuery code could look something like this (assuming the same html as above):

<script type="text/javascript">
$(document).ready(function() {
    var urlParts = window.location.pathname.split("/"),
        // get the last section of the url
        currentPage = urlParts[urlParts.length - 1];

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

---

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.

---

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