Este es un sitio web de una sola página en el que estoy trabajando actualmente. Pero cuando hago clic en otro enlace en la barra de navegación, no cambia de color, aunque el desplazamiento funciona perfectamente. Aquí está mi código html:
<html> <body> <div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto mb-2 "> <li class="nav-item "> <a class="nav-link scroll active " aria-current="page" href="#intro">Home</a> </li> <li class="nav-item"> <a class="nav-link scroll" href="#about">About Us </a> </li> <li class="nav-item"> <a class="nav-link scroll" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link scroll" href="#">Products</a> </li> </ul> </div> </html> </body>ingrese la descripción de la imagen aquí
Aquí está mi css:
<style> .navbar .nav-item a { color: #5cbf8f !important; } .navbar .nav-item a:hover { color: #028b77 !important; } .navbar .nav-item a.active { color: #028b77 !important; } </style>ingrese la descripción de la imagen aquí
Aquí está mi J:
<script> $(document).ready(function () { var scrollLink = $(".scroll"); // Smooth scrolling scrollLink.click(function (e) { e.preventDefault(); $("body,html").animate( { scrollTop: $(this.hash).offset().top, }, 1000 ); }); // Active link switching $(window).scroll(function () { var scrollbarLocation = $(this).scrollTop(); scrollLink.each(function () { var sectionOffset = $(this.hash).offset().top - 20; if (sectionOffset <= scrollbarLocation) { $(this).parent().addClass("active"); $(this).parent().siblings().removeClass("active"); } }); }); }); </script>ingrese la descripción de la imagen aquí
NB: Realmente no sé sobre js, solo lo encontré en Internet.
Barra de navegación:
Creo que tu js está mal.
$('.active').removeClass('active'); $(this).addClass('active');Hay opciones más eficientes disponibles si se conoce la jerarquía DOM.
Por ejemplo, si todos son hermanos, puedes usar esto:
$(this).addClass('active').siblings('.active').removeClass('active');