Follow by Email

How to change color or background of the menu tab of current page using css & jquery

In this tutorial i will show you that how can we change the color or background of the menu tab when we are on that page.
<div class="menu">
                <li><a href="/Home">Home</a></li>
                <li><a href="/About Me">Forms</a></li>
                <li><a href="/Contact Me">Look &amp; Feel</a></li>
                <li><a href="/Blog">Security</a></li>
 The css is somthing like this....
.menu ul{
    padding0px 0px 0px 3px;
  .menu ul li {
    border-radius5px 5px 0px 0px;
    -moz-border-radius5px 5px 0px 0px;
    -webkit-border-radius5px 5px 0px 0px;
    border-left1px solid black;
    border-right1px solid black;
    border-top : 1px solid black;
 .menu ul li a{
  .menu ul li a:hover{
 .menu ul a{
    border-bottom2px solid white;
and a samll jquery which does all magic is ...
        $(".menu ul li").removeClass("active");
        $(function () {
            var url = window.location.pathname;  
            var activePage = url.substring(url.lastIndexOf('/') + 1);
            $('.menu ul li a').each(function () {
       var currentPage = this.href.substring(this.href.lastIndexOf('/') + 1);
             if (activePage == currentPage) {


Post a Comment