Creé una barra de navegación lateral y la estoy usando en dos páginas html usando jquery. También hay un subrayado en la barra de navegación que se mueve según el enlace de navegación seleccionado. A continuación se muestra el código para la barra de navegación y las páginas html:

sidenav.html

 <script type="text/javascript" src="script.js"></script> <link href="design.css" rel="stylesheet" type="text/css" />

Página 1

Página 2

pagina1.html

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> $(function(){ $("#nav-placeholder").load("sidenav.html"); }); </script> <div id="nav-placeholder"> </div> page1!

pagina2.html

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> $(function(){ $("#nav-placeholder").load("sidenav.html"); }); </script> <div id="nav-placeholder"> </div> page2!

script.js: Script para el movimiento del subrayado:

 function ul(index) { console.log('click!' + index) var underlines = document.querySelectorAll(".underline"); for (var i = 0; i < underlines.length; i++) { console.log(index*100) underlines[i].style.transform = 'translate3d(0, ' + index * 70 + 'px, 0)'; }

}

Ahora lo que está sucediendo es que se suponía que el subrayado se movería hacia abajo al cambiar a los enlaces de navegación usando la barra de navegación. Pero el problema es que, a medida que paso de page1.html a page2.html, la pantalla se actualiza y el subrayado vuelve a su posición original.

Mi pregunta es cómo lograr este movimiento de subrayado al cambiar entre páginas html.

No estoy seguro de si mi enfoque es correcto, ya que soy nuevo en la interfaz de usuario. Proporcione algunas referencias sobre cómo cambiar entre páginas usando la barra de navegación y resalte la navegación seleccionada.

Gracias.