CODEWITHSUNDEEP
phpjavascriptjquery
Namit
Namit

Reputation: 1322

Setting active class for navigation

I have a separate navigation php which has a list of links and menu options:

 echo "<ul id='menu'>";
//some if loop to do the following:
    echo "<li><a href='#'>Adminstration</a>
                    <ul><li>";
            if($userm == 'R'||$userm == 'RW') {
                echo "<a href='/N.Jain/administration/usermanagement.php>User Management</a>";
                }

This file has 10 such sub-menu. What i am trying to achieve here is that if a User is on this particular page, then the menu should expand and highlight that option.

Here is my menu javascript:

function initMenu() {
  $('#menu ul').hide();
  $('#menu li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }

Now i am trying to get the link and then set its class to active and then do something: 

function markActiveLink() {
 $("#menu li ul li a").filter(function() {
  var currentURL = window.location.toString().split("/");
  return $(this).attr("href") == currentURL[currentURL.length-1];
 }).addClass("active");

if($('#menu li ul li a').hasClass('active') == true) {
    console.log('has');
 }
}

Upvotes: 1

Views: 320

Answers (2)

ShankarSangoli
ShankarSangoli

Reputation: 69915

attr('href') gives only the attribute value whatever you have set on the anchor href attribute. If you use href property of anchor element using prop('href') then it will give you the complete url. And then you can compare the complete url instead of spliting and trying the compare part of the url. Try this.

function markActiveLink() {
   $("#menu li ul li a").filter(function() {
      return $(this).prop("href").toUpperCase() == window.location.href.toUpperCase();
   })
   .addClass("active")
   .closest('ul')        //get the closest ul 
   .slideDown('normal'); //expand it

   if($('#menu li ul li a').hasClass('active') == true) {
        console.log('has');
   }
}

Note I am converting both the href and location to upper case just to avoid case sensitive comparison.

prop() - Gets the value of a property for the first element in the set of matched elements.

Upvotes: 3

Brian
Brian

Reputation: 3023

Wouldn't it be much more efficient to use PHP to output an "active" class on the appropriate menu items as you output them? I don't understand what the circumstance is that you want to use PHP to output the menu, but JS to flag the menu item as active here...

While outputting the menu items, why not compare at that point if that is the current menu item?

function isCurrentPage( $url ) {
    if( $_SERVER['REQUEST_URI'] == $url ) return true;
    return false;
}

if($userm == 'R'||$userm == 'RW') {
   echo "<a href='/path/to_file/usermanagement.php'".(isCurrentPage('/path/to_file/usermanagement.php') ? " class=\"active\" : "" ).">User Management</a>";
}

Upvotes: 1

Related Questions