Change .html URL depending on the active div

91
March 06, 2022, at 10:20 PM

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.

Answer 1

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.

Answer 2

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

Answer 3

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"

Rent Charter Buses Company
READ ALSO
Back button of the browser is not working + content is not loading if don&#39;t click on refresh button

Back button of the browser is not working + content is not loading if don't click on refresh button

I am really new to JS/jQuery/Ajax I have this codeI want that the content in article tag change but to keep all the rest (header, menu and footer) stays the same while the user click on a link of on the website

106
`element.innerHTML` not working as expected

`element.innerHTML` not working as expected

I have a form on whose submission, will post a URL, and the server returns a HTML string which should be appended to the form

97
How to call method Model in jQyery

How to call method Model in jQyery

I have a path method in the Course model

112
Jquery data tables need to show only selected rows from an integer array of IDs

Jquery data tables need to show only selected rows from an integer array of IDs

I have a drop down with checkboxes in itWhen I select multiple items, I have a method which gets those IDs in an integer array

123