Tengo dos páginas html: index1.html e index2.html. En index1.html, tengo dos botones: Comenzar e Iniciar sesión. En index2.html, tengo dos divs (formulario de registro y formulario de inicio de sesión), y cualquiera de ellos está activo (configurándolos con clase activa). El activo predeterminado es el formulario de registro: <div class="form sign-up-form active">...</form> , y el otro formulario, que es para iniciar sesión, aún no está configurado como activo: <div class="form sign-in-form">...</div>
Tenga en cuenta que index2.html es una página de doble control deslizante, donde no se desplaza hacia abajo, ya que los divs se colocan uno al lado del otro.
Quiero que mi botón Comenzar de index1.html redirija a index2.html, pero en el formulario de registro activo, y quiero que mi botón Iniciar sesión de index1.html redirija a index2.html, pero en el formulario de inicio de sesión activo forma.
El problema es que no puedo redirigirlos a un div activo específico. La URL de index2.html solo va con "index2.html?#". ¿Cómo cambio la URL según el div activo? ex. index2.html#sign-up si el formulario de registro está activo e index2.html?#sign-in si el formulario de inicio de sesión está activo.
En index1.html puedes usar hashtag en tu href
<a href="index2.html#sign-in"><div>Sign in</div></a>En index2.html puede verificar si hay un hashtag de inicio de sesión en la URL
const signInForm = document.getElementById("sign-in-form") const currentHash = window.location.hash if(currentHash.includes('sign-in')){ signInForm.classList.add("active") signUpForm.classList.remove("active") }(Tenga en cuenta que puse una identificación en su botón de inicio de sesión y registro)
<div id="sign-up-form" class="form sign-up-form active">Sign Up</div> <div id="sign-in-form" class="form sign-in-form">Sign in</div>Como explicación, la propiedad location.hash establece o devuelve la parte ancla de una URL, incluido el signo de almohadilla (#). Y luego, después de obtener el hashtag de la URL, podemos verificar si hay una palabra de "inicio de sesión" en nuestro hashtag.
He intentado simular e implementar una solución en él. Consultehttps://stackblitz.com/edit/web-platform-uawtkc?file=login.html , espero que ayude.
Básicamente, necesitaría un poco de JS para marcar activo en qué elemento desea apuntar para activar al navegar de un archivo a otro.
Si desea que la URL siga las clases de sus elementos, primero debe obtener los elementos, luego obtener sus clases y luego verificar cuáles tienen clases activas.
<div id="sign-up-form" class="form sign-up-form active">Sign Up</div> <div id="sign-in-form" class="form sign-in-form">Sign in</div>Obtener sus clases
const signInForm = document.getElementById("sign-in-form").classList const signUpForm = document.getElementById("sign-up-form").classListComprueba cuál está activo
if (signInForm.contains("active")) window.location.hash = "SignIn" if (signUpForm.contains("active")) window.location.hash = "SignUp"Puede cambiar el hashtag de URL con esta ventana.ubicación.hash = "nueva palabra"