add active class to current page in “menu”

Question

i have created the file header.php which calls the header part in all pages...now i want that if i am on a page..it will apply two class to the given button in menu...i have try to do this but it not working properly...please guide me how to do....

<?php
session_start();
?>

<script type="text/javascript">
var path = window.location.pathname.split('/');
path = path[path.length-1];

if (path !== undefined) {
    $("#menu")
        .find("a[href$='" + path + "']") // gets all links that match the href
        .parents('li')  // gets all list items that are ancestors of the link
        .children('a')  // walks down one level from all selected li's
        .addClass('active');
}
</script>
<script type="text/javascript">
var path = window.location.pathname.split('/');
path = path[path.length-1];

if (path !== undefined) {
    $("#menu")
        .find("a[href$='" + path + "']") // gets all links that match the href
        .parents('li')  // gets all list items that are ancestors of the link
        .children('a') 
        .children('span') // walks down one level from all selected li's
        .addClass('curant');
}
</script>

<div id="header">
  <h1><a href="home.php"><img src="images/logo.png" width="184" height="77" alt=""></a></h1>
  <div class="header_left">
    <h2>Customer Relationship <span>Management System</span></h2>
    <div class="PoweredBy">
     <h3> PoweredBy:</h3>
     <div class="PoweredBy_image"><a href="#"><img src="images/PoweredBy-logo.png" alt=""></a></div>
    </div>
  </div>
 <div class="menu" id="menu">
 <div class="menu_leftbg"></div>
  <div class="nav">
   <ul>

     <li class="home"><a href="home.php"><span><img src="images/home-page.png" alt=""></span></a></li>
     <li><a  href="all_inquiry.php"><span >All Enquiry</span></a></li>
     <li><a  href="booking.php"><span >Book Now</span></a></li>
     <li><a  href="all_booking.php"><span >All Booking</span></a></li>
     <li><a  href="#"><span >Send SMS</span></a></li>
   </ul>

   <div class="right_nav">
   <h3>Welcome! <?php if(loggedin()){?><span><?php echo $_SESSION['username']; echo $_COOKIE['username']; }?></span></h3>
 <?php if(loggedin()){ ?> <h2><a href="logout.php">Log Out</a></h2><?php } ?>
   </div>
   </div>
   <div class="menu_rightbg"></div>
 </div>
</div>

Answer 1

Try this:

Javascript:

 $(function () {
     var mnurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);

     $("ul.menu").each(function () {
         if ($(this).attr("href") == mnurl) $(this).addClass("menu-selected");
     })
 });

css:

.menu-selected{ color: #ccc !important;}

Answer 2

You need to run your script on dom ready.

$(function(){
    var split = window.location.pathname.split('/');
    var mnurl = split[split.length-1];
    $('#menu a[href="' + mnurl + '"]').addClass("menu-selected").children('span').addClass("curant");
})

Demo: Fiddle