lo que quiero hacer es que cuando hagamos clic en la etiqueta de anclaje, irá a page2.html y cambiará el color de fondo de un div específico.
(La etiqueta de anclaje tiene una url&id en su href para redirigir a una página nueva pero a una sección específica).
pagina1.html
<html> <body> <a href="/page2.html#color1">yellow</a> <a href="/page2.html#color2">green</a> <a href="/page2.html#color3">blue</a> </body> </html>pagina2.html
<html> <body> <div id="color1"> <p>yellow</p> </div> <div id="color2"> <p>green</p> </div> <div id="color3"> <p>blue</p> </div> </body> </html> Traté de usar una función como
(pagina1.html)
<a href="/page2.html#color1" onclick="changecolor()">yellow</a> <script> function changecolor() { document.getElementById(color1).style.background = "yellow"; } </script> Probé más funciones como esta, ¡pero ninguna funciona!
¿Es posible hacerlo solo usando javascript?
¿¿Alguien puede ayudarme??
En mi humilde opinión, la mejor solución debería ser no usar un evento onclick, ya que no activa la secuencia de comandos para cambiar los estilos en otro sitio que aún no está cargado.
Como tal, recomendaría ejecutar el script en la segunda página y usar window.location.href para obtener la URL.
Luego puede usar Switch-Statements para aplicar cambios algo como esto:
var url = window.location.href, div = document.getElementById('id'); switch (url) { case /page2.html#color1: div.style.background = "yellow"; break; case /page2.html#color2: div.style.background = "green"; break; case /page2.html#color3: div.style.background = "blue"; break; }Creo que es mejor escuchar el evento hashchange y luego simplemente manipular los elementos necesarios css
<body id="someId"> <a href="./page2.html#yellow">yellow</a> <a href="./page2.html#green">green</a> <a href="./page2.html#blue">blue</a> </body> <script> window.addEventListener('hashchange', (event) => { const color = window.location.hash.replace('#', '') document.getElementById('someId').style.background = color }); </script>