Menu Active Page

When I used scrollspy from bootstrap I realized it only applies to the case within a single page. The following idea came up to make the menu active with a check system from the url.

Container HTML

In my case the nav menu container is like the following.

<div class="classynav"> <ul id="nav"> <li class="nav-item"> <a href="https://example.org/about.php">Tentang</a> </li> <li class="nav-item active"> <a href="https://example.org/project.php">Project</a> </li> </ul> </div> 

Script

The principle of this script handle only matches the selected url with the url in the container. For sub menu handlers, I haven't been able to find a meaningful solution, maybe you can use the split attribute ?id for the php web case, or maybe you have an interesting idea, please share it in the comments.

 $(function(){ var url = window.location.href; $(".classynav a").each(function() { var d = $(this).attr('href'); if(url == d) { $(this).closest(".nav-item").addClass("active"); } }); }); 

Done