Wednesday, July 7, 2010

Get Active/ Inactive/ Current tabs in Navigation Bar using PHP and jQuery

php Code
Step 1: Get current page URL using PHP

$phpSelf = $_SERVER['REQUEST_URI'];
               
jQuery Code

Step 2: Check whether URL is similar to navigation bar button url, if they are similar we give it as the current active page,
< script type="text/javascript" >
        $(document).ready(function(){
             var root_url =
"http://localhost";
             var phpSelf = root_url+"<?php echo $phpSelf;?>";
              $("#navigation li").each(function() {
                  var link = $(this).children("a").attr("href");
                  if(phpSelf == link){
                  $(this).addClass("active");
                  }
               });
          });
 < /script >


Change,
active
to your active css class
http://localhost to website root directory

Have Fun !

No comments:

Popular Posts