Hola y gracias de antemano por tu ayuda!
Anteriormente usé JS para agregar una clase activa a un elemento si se muestra la URL correspondiente.
Estoy tratando de tomar lo que he hecho en el pasado y editarlo.
Estoy tratando de agregar una clase activa a un elemento si el atributo href es igual a '#tab1', por ejemplo. En lugar de si la URL coincide.
Consulte el JS existente a continuación con el que estoy tratando de trabajar, he intentado algunas cosas, incluido un getelementbyID en lugar de seleccionar el href, pero estoy perdido.
$(document).ready(function () { const $links = $('.hs-mega-menu ul li a'); $.each($links, function (index, link) { if (link.href == (document.URL)) { $(this).addClass('active'); } }); });Un ejemplo de uno de los enlaces de navegación que intento seleccionar y aplicar la clase activa también se encuentra a continuación:
<li class="nav-item"> <a class="nav-link g-py-10--md g-px-15--md" href="#tab1" role="tab" data-toggle="tab">Printed Stationery<i class="g-ml-10 fa-solid fa-caret-down d-sm-none"></i></a> </li>Hay algunas formas de hacer esto, puede usar una función como la que tiene o puede filtrar o simplemente usar un selector para el atributo. Aquí hay ejemplos de los dos últimos.
$(function() { let testurl = "#tab1"; const $links = $('.hs-mega-menu ul li a'); $links.filter(function(index, link) { return $(this).attr('href') == testurl; }).addClass("active"); $links.filter("[href='" + testurl + "']").addClass("active-test") }); .active { color: green; } .active-test { background-color: #ffddff; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="hs-mega-menu"> <ul> <li class="nav-item"> <a class="nav-link g-py-10--md g-px-15--md" href="#tab1" role="tab" data-toggle="tab">Printed Stationery<i class="g-ml-10 fa-solid fa-caret-down d-sm-none"></i></a> </li> <li class="nav-item"> <a class="nav-link g-py-10--md g-px-15--md" href="#tab1" role="tab" data-toggle="tab">Printed Stationery<i class="g-ml-10 fa-solid fa-caret-down d-sm-none"></i></a> </li> <li class="nav-item"> <a class="nav-link g-py-10--md g-px-15--md" href="#tab2" role="tab" data-toggle="tab">Printed Stationery<i class="g-ml-10 fa-solid fa-caret-down d-sm-none"></i></a> </li> </ul> </div>