Change.html URL 取决于active div

Question

我有两个 html 页面：index1.html 和 index2.html。 在 index1.html 中，我有两个按钮：开始和登录。 在 index2.html 中，我有两个 div（注册表格和登录表格），其中一个是活动的（通过将它们设置为活动类）。 默认活动的是注册表单： <div class="form sign-up-form active">...</form> ，另一个用于登录的表单尚未设置为活动： <div class="form sign-in-form">...</div>

请注意，index2.html 是一个双 slider 页面，它不会向下滚动，因为 div 彼此相邻。

我希望我的“开始”按钮从 index1.html 重定向到 index2.html，但在活动注册表单上，我希望我的登录按钮从 index1.html 重定向到 index2.html，但在活动登录形式。

问题是我无法将它们重定向到特定的活动 div。 index2.html 的 URL 只与“index2.html?#”一起出现。 如何根据活动 div 更改 URL？ 前任。 index2.html#sign-up 如果注册表单处于活动状态，index2.html?#sign-in 如果登录表单处于活动状态。

Answer 1

在 index1.html 中，您可以在 href 中使用 url 参数

<a href="index2.html?page=SignIn""><div>Sign in</div></a>

Answer 2

我已尝试对其进行模拟和实施解决方案，请查看https:\/\/stackblitz.com\/edit\/web-platform-uawtkc?file=login.html<\/a> ，希望对您有所帮助。

基本上，当从一个文件导航到另一个文件时，您需要一些 JS 来标记何时要激活哪个元素。

Answer 3

如果你想让url跟随你的元素类，你必须先获取元素，然后获取它们的类，然后检查哪个有活动类

<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>

获取他们的课程

const signInForm = document.getElementById("sign-in-form").classList
const signUpForm = document.getElementById("sign-up-form").classList

检查哪个是活动的

if (signInForm.contains("active")) window.location.hash = "SignIn"
if (signUpForm.contains("active")) window.location.hash = "SignUp"

您可以使用此 window.location.hash =“新词”更改 url 主题标签