html menu and sub menu active

Question

I assign an active class in my menu, but the active class is not removed from the mobile menu, it always remains active. And also, if the subcategory is selected, I want the category itself to have an active class. I tried, I couldn't. Thank you in advance to the friends who helped.

For example, if category1.php page is open, "category" has the deactivated class.

function updateMenu(url) {
const active = document.querySelector('.menu-item.active');

if (active !== null) {
    active.classList.remove('active');
}

const links = Array.from(document.querySelectorAll('.menu-item'));
    
links.forEach(function(li){
   let anchor = li.querySelector("a");
   if(url.indexOf(anchor.href) > -1){
       li.classList.add("active");
    }
});
    }
    
  updateMenu(window.location.href);

user_4770813 · Answer

window.location.pathname is the property you need. Once you have it, you can find the filename (last part of the whole pathname) by using .substr and .lastIndexOf.

In this code snippet, the active item is the parent of JS, I used that as an example since the location.href for these SO snippets is https://stacksnippets.net/js, hence the pathname is /js, and finally, the filename is js.

Check the code and you'll see what I mean

HIH

function updateMenu(url) {
   const active = document.querySelector('.menu-item.active');

   if (active !== null) {
      active.classList.remove('active');
   }

   const links = Array.from(document.querySelectorAll('.menu-item'));
   
   links.forEach(function(li){
      let anchor = li.querySelector("a");
      
      if(anchor.href.indexOf(url) > -1) {
        const parentLI = $(li).parents('.menu-item').get(0)
        if(parentLI)
          parentLI.classList.add("active");
        else 
          li.classList.add("active");
      } 
   });
}

const pathname = window.location.pathname, filename=pathname.substr(pathname.lastIndexOf('/') + 1);


updateMenu(filename);

li.active > a span{
  font-weight: bold !important;
  color: red
}

html menu and sub menu active

1 Answers