Highlight selected HTML menu item in JavaScript and jQuery

Last Reply 13 days ago By dharmendr

Posted 14 days ago

Hello, 

Javascript Highlight Selected Menu Item of Current Page

It works when the first page loads but doesn't work when I press another link.

Can you help me edit the code?

<script type="text/javascript">
    $(function () {
        var url = window.location.href;
        $("nav ul li a").each(function () {
            if (url == (this.href)) {
                $(this).closest("nav ul li").addClass("current-menu-item");
            }
            else {
                $(this).closest("nav ul li").removeClass("current-menu-item");
            }
        });
    });
</script>

 

     <div class="qrt-menu">
       <div id="qrt-dynamic-menu" class="qrt-dynamic-menu">
         <nav>
           <ul>
             <li class="current-menu-item">
               <a class="qrt-mobile-fix" href="home-video.html">Home</a>
               <ul>
                 <li class="qrt-this-page"><a href="home-slider.html">Home slider</a></li>
                 <li><a href="home-video.html">Home video</a></li>
                 <li><a href="home-image.html">Home image</a></li>
                 <li><a href="home-combined.html">Home combined</a></li>
                 <li><a href="home-classic.html">Home classic</a></li>
               </ul>
             </li>
             <li>
               <a class="qrt-mobile-fix" href="about-us.html">About</a>
               <ul>
                 <li><a href="about-us.html">About us</a></li>
                 <li><a href="about-me.html">About me</a></li>
                 <li><a href="about-us-classic.html">About us classic</a></li>
                 <li><a href="about-me-classic.html">About me classic</a></li>
               </ul>
             </li>
             <li>
               <a class="qrt-mobile-fix" href="portfolio-fs-masonry-1.html">Portfolio</a>
               <ul>
                 <li><a href="portfolio-half-masonry-1.html">Half masonry</a></li>
                 <li><a href="portfolio-half-masonry-2.html">Half masonry 2</a></li>
                 <li><a href="portfolio-half-grid-1-col.html">Half grid 1 column</a></li>
                 <li><a href="portfolio-half-grid-2-col.html">Half grid 2 column</a></li>
                 <li><a href="portfolio-fs-masonry-1.html">fullscreen masonry</a></li>
                 <li><a href="portfolio-fs-masonry-2.html">fullscreen masonry 2</a></li>
                 <li><a href="portfolio-fs-grid-3-col.html">fullscreen grid 3 column</a></li>
                 <li><a href="portfolio-fs-grid-2-col.html">fullscreen grid 2 column</a></li>
                 <li><a href="single-work-1.html">Single work 1</a></li>
                 <li><a href="single-work-2.html">Single work 2</a></li>
               </ul>
             </li>
             <li>
               <a class="qrt-mobile-fix" href="contact.html">Contact</a>
               <ul>
                 <li><a href="contact.html">Contact type 1</a></li>
                 <li><a href="contact-2.html">Contact type 2</a></li>
               </ul>
             </li>
             <li>
               <a class="qrt-mobile-fix" href="blog-list.html">Blog</a>
               <ul>
                 <li><a href="blog-list.html">Blog list</a></li>
                 <li><a href="publication.html">Publication</a></li>
               </ul>
             </li>
           </ul>
         </nav>
       </div>
     </div>

 

You are viewing reply posted by: dharmendr 13 days ago.
Posted 13 days ago

Hi merictokatlio...,

Add click event to the anchor tag. Then remove the current-menu-item from all element and set to the selected element.

Refer below code.

$("nav ul li a").click(function () {
    $("nav ul li a").removeClass("current-menu-item");
    $(this).addClass("current-menu-item");
});