Today, We want to share with you jquery add active class to current menu item.In this post we will show you jquery add actives class to currents menu item, hear for Setting an actives menu item based on the currents URL with jQuery we will give you demo and example for implement.In this post, we will learn about PHP Laravel 5.6 Dynamically Add Actives Class with an example.

how to add active class dynamically in php

Contents

How to get the URL of the Active page using and adding an actives class to navigation based on URL. With the jQuery find the best way to the highlight the active section in the navigation menu.

<script>
  jQuery(function($) {
      var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
        $(".navbar-nav > li > a").each(function(){
        if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
        $(this).addClass("active");
        // $(this).parent("li").addClass("active");
      })
  });
</script>

Jquery Add active class to main menu

Example 1: index.html

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <style>
         body{
         font-sze:14px;
         }
         .container{
         max-width:960px;
         margin:0 auto;
         }
         nav ul li{
         list-style:none;
         float:left;
         padding-right:20px;
         }
         nav ul li a{
         text-decoration:none;
         color:#222;
         background-color:#ccc;
         padding:4px 5px;
         }
         .active{
         background-color:#d90000;
         color:#fff;
         }
      </style>
      <script>
         $(document).ready(function(){
           $('ul li a').click(function(){
             $('li a').removeClass("active");
             $(this).addClass("active");
         });
         });
      </script>
   </head>
   <body>
      <div style="text-align:center;margin-top:25px;font-weight:bold;texxxt-decoration:none;">
         WWW.PAKAINFO.COM Visit <a href="https://www.pakainfo.com/" target="_blank" rel="noopener">My Blog</a>
      </div>
      <div class="container">
         <nav class="navecation">
            <ul id="navi">
               <li><a class="menu active" href="#">About </a></li>
               <li><a class="menu" href="#">Contact  </a></li>
               <li><a class="menu" href="#">Services</a></li>
               <li><a class="menu" href="#">Contact Us</a></li>
               <li><a class="menu" href="http://www.pakainfo.com.html">Read Our Blog</a></li>
            </ul>
         </nav>
      </div>
      <body>
</html>

I hope you get an idea about jquery add active class to currents page.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

how to add active class dynamically in php

Jquery Add active class to main menu

Related posts: