Question

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

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>