Change .html URL depending on the active div-CodePudding

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 >...</form>, and the other form, which is for signing-in is not yet set as active: <div >...</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.

CodePudding user response：

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.

CodePudding user response：

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" >Sign Up</div>
<div id="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