Highlighting the link that I am currently on

How can i have a background-color for the link that I am currently in?

        <div id="pages">
            <a class="page" href="homepage.html">HOMEPAGE</a>|
            <a class="page" href="favorites.html">FAVORITES</a>|
            <a class="page" href="education.html">EDUCATION </a>|
            <a class="page" href="dreamplaces.html">DREAMPLACES </a>|
            <a class="page" href="dreamfoods.html">DREAMFOODS</a>
        </div>

This is how my output looks, but I would like it to be highlighted when I am on that link

enter image description here

Answers 1

  • CSS:

    .selected { background-color: #eee;}  //the color is just for demonstration
    

    Javascript:

    $('a[href="' + document.location.href.split('/').pop() +  '"]').addClass('selected');
    

Related Articles