0

With Jquery I added the "current" class to all the divs that have the menu_item class. This way I can highlight the menu text when I'm on the current page. However, the first menu item always takes the "current" class even when I'm not on the account page. The problem is that the structure of my pages is composed in such a way that account is always present, I give an example:

mywebsite.com/account - This is where the dashboard is located

mywebsite.com/account/impostazioni - Here are the settings

Since account is always present even if they are on a different page, obviously the script always highlights the first menu item because the word account is present in the link. Is there a way to remove the current class from the first menu item when I'm on a different page but it contains the word account ?

Sorry but I'm new, I don't know Jquery and Js well. Before posting I looked at the Jquery documentation and searched on stacks, but found nothing useful for me. Any reply is appreciated, thanks.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
      
    if(window.location.href.indexOf("/account/") > -1) {
   $(".menu_item.1").addClass('current');
}

    if(window.location.href.indexOf("/ordini/") > -1) {
   $(".menu_item.2").addClass('current');
} 
  });
</script>

<div class="container_menu">
<div class="container_items">
 <div class="menu_item 1">
  <a href="/account">
   <i class="icon_menu fa-regular fa-gear"></i>
   <span class="link_text">First Item</span>
  </a>
 </div>

 <div class="menu_item 2">
  <a href="/ordini">
   <i class="icon_menu fa-regular fa-basket-shopping"></i>
   <span class="link_text">Second Item</span>
  </a>
 </div>
</div>
</div>
Snorlax
  • 183
  • 4
  • 27
  • else{ $(".menu_item.1").removeClass('current'); } Try to add this on your query. then this one on the second one else{ $(".menu_item.2").removeClass('current'); } see if this will work for you – Crystal May 10 '22 at 21:36
  • I was thinking about the same thing. Can I delete the current class from the first menu item with else? I'm trying but it doesn't work, I'm doing something wrong. Is it correct to put else inside the first if? or must he go outside? – Snorlax May 10 '22 at 21:48
  • you should be able t remove it. if(window.location.href.indexOf("/account/")) { $(".menu_item.1").addClass('current'); }else{ $(".menu_item.1").removeClass('current'); Try this – Crystal May 10 '22 at 21:58
  • I did this, but it's not working. `if(window.location.href.indexOf("/account/")) { $(".menu_item.1").addClass('current'); } else{ $(".menu_item.1").removeClass('current'); }` I don't know if I'm doing something wrong. I believe this happens because even if they are in account / orders, the word account is always there in the link. So I guess as long as it stays there as the base of the url the problem persists. Can I somehow specify the exact url instead of just relying on a word? So I would have the class added only if the address is correct. – Snorlax May 10 '22 at 22:08
  • if (window.location.href = "www.etc.com/"){$(".menu_item.1").addClass('current'); } else{ $(".menu_item.1").removeClass('current'); }. You can try this one and see. – Crystal May 10 '22 at 23:52

2 Answers2

0

You tagged javascript in your question so there is vanilla javascript solutions

  1. if you want to remove specific class use:

element.classList.remove('classname');

  1. if you want to remove all classes + class attribute use:

element.removeAttribute('class');

And my advice will be that if you are newbie first start with vanilla javascript and only then when you feel comfortable with start learning libraries (or don't start )))

redevil
  • 155
  • 7
  • Thank you for your answer. I will try to apply your advice. So can I add and remove classes based on links only with vanilla Js? I think it would also be more comfortable for me not to implement libraries. Could you leave me some references? Thanks. – Snorlax May 10 '22 at 22:17
  • You can do everything with vanilla js what you can do with jquery. Jquery functions are written with vanilla javascript. – redevil May 10 '22 at 22:21
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide – redevil May 10 '22 at 22:28
0

I found a solution on my own.

basically I inserted another line to remove the class from the first element.

$(document).ready(function() {
   
    if(window.location.href.indexOf("account") > -1) {
   $(".menu_item.1").addClass('current');
} 

    if(window.location.href.indexOf("ordini") > -1) {
   $(".menu_item.2").addClass('current');
   $(".menu_item.1").removeClass('current'); //I add this line
}   

  });
Snorlax
  • 183
  • 4
  • 27