Entonces, normalmente, cuando visito, por ejemplo, "index.html" y le doy un enlace href en mi barra de navegación, la clase "activa" o cualquier clase y la coloreo para que defina en qué página estoy
entonces
<a href="index.html" class="active">y
a.active { background-color: #009879; color: white; }simplemente haría el truco y resaltaría la página en la que estoy actualmente en la barra de navegación
pero tengo una sección en mi index.html a la que puedo ir haciendo clic en esto en la barra de navegación
<a href="index.html#about">pero si activo class="active" para esta sección, tanto el índice como la sección se resaltarán en mi barra de navegación
¿Cómo hago para que cuando estoy en la sección, mi index.html pierda su clase = activo y para que la sección gane esa clase?
¡posiblemente si esto pudiera hacerse usando solo CSS!
TL; DR Necesito una forma en CSS/JS que agregue/elimine la clase para cualquier elemento en el que quiera que esté.
Hola , la función que quieres en tu proyecto se llama scrollspy y se logra con javascript. Puede usar el arranque o crear la función en javascript puro. Pero para no reinventar la rueda, les muestro un ejemplo basado en un script javascript de vainilla de: https://github.com/cferdinandi/gumshoe .
var spy = new Gumshoe('#my-awesome-nav a'); html { overflow-y: auto; scroll-behavior: smooth; } /* Sets body width */ .container { max-width: 90em; width: 88%; margin-left: auto; margin-right: auto; } /** * Grid */ .grid { display: grid; grid-gap: 2em; grid-template-columns: 30% 70%; } #my-awesome-nav { position: fixed; } #my-awesome-nav li.active { background-color: black; } #my-awesome-nav li.active a { color: white; } /** * Sections */ .section { color: #ffffff; height: 95vh; margin: 0; padding: 2em; } #eenie { background-color: #0088cc; } #meenie { background-color: rebeccapurple; } #miney { background-color: #272727; } #mo { background-color: #f42b37; } <script src="https://cdn.jsdelivr.net/gh/cferdinandi/gumshoe/dist/gumshoe.polyfills.min.js"></script> <div class="container"> <div class="grid"> <nav> <ul id="my-awesome-nav"> <li><a href="#eenie">Eenie</a></li> <li><a href="#meenie">Meenie</a></li> <li><a href="#miney">Miney</a></li> <li><a href="#mo">Mo</a></li> </ul> </nav> <main> <div class="section" id="eenie"> Eenie... </div> <div class="section" id="meenie"> Meenie... </div> <div class="section" id="miney"> Miney... </div> <div class="section" id="mo"> Mo... </div> <p><a data-scroll href="#top">Back to the top</a></p> </main> </div> </div>