how to change the colour of a link if its on the current page

[nadiam]

hey guys so im kinda stumped. i have a menu bar

|home|events|contacts|

for example if im on the home page i would like the |home| to be active or to show that i am on the home page. ive tried :visited and i even tried jquery and it doesnt work for me. i dunno, maybe im not doing it right or smtg.

<div class="top-menu-content">
    <ul class="top-menu-button">
        <li class="top"><a class="top-button" href="home.php">Home</a></li>
        <li class="top"><a class="top-button" href="event.php">Events</a></li>
        <li class="top"><a class="top-button" href="contact_data.php">Contacts</a></li>
    </ul>
</div>

jquery that i tried:

$(document).ready(function() {
    $(".top [href]").each(function() {
    if (this.href == window.location.href) {
        $(this).addClass("active");
        }
    });
});
</script>

css:

.top-menu-content{width:100%;}
.top-menu-button{list-style-type:none;overflow:hidden;}
.top{float:left;}
.top-button{height:22px;font-family:Arial;display:block;width:200px;font-weight:bold;background-color:DeepSkyBlue;color:white;text-align:center;padding:4px;text-decoration:none;text-transform:uppercase;}
.top-button:hover{background-color:DodgerBlue}

thanks in advance!

[pritaeas]

The problem with if (this.href == window.location.href) is that this.href only contains home.php while window.location.href contains the full URL.

[nadiam]

oh, then how would i make it for all the href?