Set <li> item as active on navigating to particular page

Question

I am working on an Asp.Net website where I replaced the default horizontal navbar in the Site.Master with the navbar available in the AdminLTE example. AdminLTE Example.

The vertical navbar looks like this

The code for the navbar is as under

<ul class="sidebar-menu" data-widget="tree">
                <li class="header">Navigation</li>
                <!-- Optionally, you can add icons to the links -->
                <li>
                    <a href="Default.aspx">
                        <i class="fa fa-home"></i>
                        <span>Home</span>
                    </a>
                </li>
                <li>
                    <a href="About.aspx">
                        <i class="fa fa-question"></i>
                        <span>About</span>
                    </a>
                </li>
                <li>
                    <a href="Contact.aspx">
                        <i class="fa fa-address-book"></i>
                        <span>Contact</span>
                    </a>
                </li>
                <li class="treeview">
                    <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
                        <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#">Link in level 2</a></li>
                        <li><a href="#">Link in level 2</a></li>
                    </ul>
                </li>
            </ul>

I want to set the list item class to active once a user navigates to that particular page. For an instance, if the user clicks on the About link it will be redirected to the about page and then on that page, the class of about link should be changed to active

I tried using this particular script but it didn't work for me

$(function() {
 var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
 $("ul li a").each(function(){
      if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
      $(this).addClass("active");
 })

});

Don't know what I am missing.

Answer 1

Your each function is based on a selector for <a> elements.
So, you are current adding the class to the <a> element, as referenced by $(this).
It seems that you want to add it to the associated <li> element.

I recommend jQuery's parent().

Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

var test_url = 'localhost:5583/About.aspx';

$(function() {
  var pgurl = test_url.substr(test_url.lastIndexOf("/") + 1);
  $("ul li a").each(function() {
    if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
      $(this).parent().addClass("active");
  })
});

.active {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-menu" data-widget="tree">
  <li class="header">Navigation</li>
  <!-- Optionally, you can add icons to the links -->
  <li>
    <a href="Default.aspx">
      <i class="fa fa-home"></i>
      <span>Home</span>
    </a>
  </li>
  <li>
    <a href="About.aspx">
      <i class="fa fa-question"></i>
      <span>About</span>
    </a>
  </li>
  <li>
    <a href="Contact.aspx">
      <i class="fa fa-address-book"></i>
      <span>Contact</span>
    </a>
  </li>
  <li class="treeview">
    <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
      <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
      </span>
    </a>
    <ul class="treeview-menu">
      <li><a href="#">Link in level 2</a></li>
      <li><a href="#">Link in level 2</a></li>
    </ul>
  </li>
</ul>

---

Alternatively, and mainly as a demonstration, you could change your selector to li and test the hrefs of descendant <a> elements.

var test_url = 'localhost:5583/About.aspx';

$(function() {
  var pgurl = test_url.substr(test_url.lastIndexOf("/") + 1);
  $("ul li").each(function() {
    if ($('a', this).attr("href") == pgurl || $('a', this).attr("href") == '')
      $(this).addClass("active");
  })
});

.active {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-menu" data-widget="tree">
  <li class="header">Navigation</li>
  <!-- Optionally, you can add icons to the links -->
  <li>
    <a href="Default.aspx">
      <i class="fa fa-home"></i>
      <span>Home</span>
    </a>
  </li>
  <li>
    <a href="About.aspx">
      <i class="fa fa-question"></i>
      <span>About</span>
    </a>
  </li>
  <li>
    <a href="Contact.aspx">
      <i class="fa fa-address-book"></i>
      <span>Contact</span>
    </a>
  </li>
  <li class="treeview">
    <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
      <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
      </span>
    </a>
    <ul class="treeview-menu">
      <li><a href="#">Link in level 2</a></li>
      <li><a href="#">Link in level 2</a></li>
    </ul>
  </li>
</ul>