Skip to main content

Highlight the navigation menu for the current page

JavaScript:
<script src="JavaScript/jquery-1.10.2.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function() {
        // this will get the full URL at the address bar
        var url = window.location.href;

        // passes on every "a" tag
        $(".topmenu a").each(function() {
            // checks if its the same on the address bar
            if (url == (this.href)) {
                $(this).closest("li").addClass("active");
                //for making parent of submenu active
               $(this).closest("li").parent().parent().addClass("active");
            }
        });
    });       
</script>


HTML Code:

<div class="topmenu">
  <ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li class="dropdown"> 

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Projects <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
      <ul class="dropdown-menu list-bg">
        <li><a href="ongoing.html">Ongoing Projects</a></li>
        <li><a href="completed.html">Completed Projects</a></li>
        <li><a href="upcoming.html">Upcoming Projects</a></li>
      </ul>
    </li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</div> 

 

Comments