Con Jquery agregué la clase "actual" a todos los divs que tienen la clase menu_item. De esta manera puedo resaltar el texto del menú cuando estoy en la página actual. Sin embargo, el primer elemento del menú siempre toma la clase "actual", incluso cuando no estoy en la página de la cuenta. El problema es que la estructura de mis paginas esta compuesta de tal manera que la cuenta siempre esta presente, pongo un ejemplo:
mywebsite.com/account: aquí es donde se encuentra el tablero
mywebsite.com/account/impostazioni - Aquí están los ajustes
Dado que la cuenta siempre está presente incluso si están en una página diferente, obviamente el script siempre resalta el primer elemento del menú porque la palabra cuenta está presente en el enlace. ¿Hay alguna manera de eliminar la clase actual del primer elemento del menú cuando estoy en una página diferente pero contiene la palabra cuenta?
Lo siento pero soy nuevo, no conozco bien Jquery y Js. Antes de publicar, miré la documentación de Jquery y busqué en las pilas, pero no encontré nada útil para mí. Cualquier respuesta es apreciada, gracias.
<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>Encontré una solución por mi cuenta.
básicamente inserté otra línea para eliminar la clase del primer elemento.
$(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 } });Etiquetó javascript en su pregunta, por lo que hay soluciones de vainilla javascript
element.classList.remove('classname') ;
element.removeAttribute('class') ;
Y mi consejo será que, si eres novato, primero comiences con javascript vainilla y solo luego, cuando te sientas cómodo, comiences a aprender bibliotecas (o no comiences)))