使用活动 class 重定向到 div 上的另一个页面

Question

我有两个 HTML 页面。 第一个页面（index1.html）有两个按钮：Get Started 和 Login。 第二个页面 (index2.html) 是一个双 slider 页面，有两个 div：Sign-in div with login form 和 Sign-up div with register form，如果单击按钮，一次只显示一个，另一个 div 显示并设置为活动。 默认的活动 div 是 Sign-up div/form，所以在我的 HTML 文件中，注册 div 已经设置为活动： <div class="form sign-up-form active">...</div> ，而我的登录 div 不是<div class="form sign-in-form">...</div>

jquery 按钮在我的登录和注册 forms 上添加活动 class：

signIn_button.addEventListener('click', () => {
    overlay_container.style.transform = 'translateX(100%)';
    overlay.style.transform = 'translateX(-50%)';

    signIn_form.classList.add('active');
    signUp_form.classList.remove('active');
})

signUp_button.addEventListener('click', () => {
    overlay_container.style.transform = 'translateX(0)';
    overlay.style.transform = 'translateX(0)';

    signUp_form.classList.add('active');
    signIn_form.classList.remove('active');
})

我希望我的按钮 Get Started: <button class="get_started">Get Started</button> in index1.html 重定向到 index2.html 但在活动注册表格上： <div class="form sign-up-form active">...</div>

和我的按钮登录： <button class="login">Login</button> in index1.html 重定向到 index2.html 但在活动登录表单上： <div class="form sign-in-form">...</div>

问题是我无法将它们重定向到特定的活动 div。 这两个按钮当前仅重定向到默认活动 div，即注册 div。

Answer 1

我认为最简单的方法是通过查询参数或 URL 片段（技术上后者在语义上更正确，但前者可能更容易）。

所以：

1. 从page1将用户重定向到page2.html?tab=signup （或page2.html#signup ）
2. 在page2上，读取当前查询参数，如果设置，则更改初始选项卡。
3. （可选但很好）在page2上，当用户更改选项卡时，还使用pushState更改 URL 以匹配（如果您不使用pushState它将触发页面加载，这也将因为（2）而起作用，但可能不会给用户最好的体验）

以下是一些相关链接：

• 如何读取查询参数
• 如何读取 URL 片段
• 关于pushState /browser URL 操作