I have two html pages: index1.html and index2.html. In index1.html, I have two buttons: Get Started and Login. In index2.html, I have two divs (Sign-up form and Sign-in form), and either one of them is active (by setting them with active class). The default active is the sign-up form: <div class="form sign-up-form active">...</form>, and the other form, which is for signing-in is not yet set as active: <div class="form sign-in-form">...</div>
Note that index2.html is a double slider page, where it does not scroll down, as the divs are positioned beside each other.
I want my Get Started button from index1.html to redirect to index2.html, but on the active Sign-up form, and I want my Login button from index1.html to redirect to index2.html, but on the active Sign-in form.
The problem is I can't redirect them on a specific active div. The URL of index2.html only goes with "index2.html?#". How do I change the URL depending on the active div? ex. index2.html#sign-up if the Sign-up form is active and index2.html?#sign-in if the Sign-in form is active.
In index1.html you can use hashtag in your href
<a href="index2.html#sign-in"><div>Sign in</div></a>
In index2.html you can check if there is sign-in hashtag in the 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")
}
(Note that i put id in your sign in and sign up button)
<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>
For explanation, the location.hash property sets or returns the anchor part of a URL, including the hash sign (#). And then after we get the hashtag from the url, we can check if there is 'sign-in' word in our hashtag
I have tried to simulate and implement a solution on it, Please check https://stackblitz.com/edit/web-platform-uawtkc?file=login.html, hope it helps.
Basically, you would require a bit of JS to mark active on when which element you want to target to activate when navigating from one file to another.
If you want the url to follow your element classes, you have to get the elements first, and then get their classes, and then check which one have active classes
<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>
Get their classes
const signInForm = document.getElementById("sign-in-form").classList
const signUpForm = document.getElementById("sign-up-form").classList
Check which one is active
if (signInForm.contains("active")) window.location.hash = "SignIn"
if (signUpForm.contains("active")) window.location.hash = "SignUp"
You can change the url hashtag with this window.location.hash = "new word"