根据活动 div 更改 .html URL答案

【问题标题】：Change .html URL depending on the active div根据活动 div 更改 .html URL
【发布时间】：2022-02-09 10:29:43
【问题描述】：

我有两个 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 是一个双滑块页面，它不会向下滚动，因为 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（如果登录表单处于活动状态）。

【问题讨论】：

RE:your deleted PDF question 人们仍然可以找到封闭的问题并阅读 cmets。当社区发现问题的详细程度足以重新打开时，可以重新打开已关闭的问题。您删除了问题，现在只有高级代表才能看到它。添加更多信息和努力并取消删除它 - 这样我就可以重新打开它

标签： javascript html jquery redirect

【解决方案1】：

我已经尝试在上面模拟并实现了一个解决方案，请查看https://stackblitz.com/edit/web-platform-uawtkc?file=login.html，希望对您有所帮助。

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

【讨论】：

【解决方案2】：

在 index1.html 中，您可以在 href 中使用主题标签

<a href="index2.html#sign-in"><div>Sign in</div></a>

在 index2.html 中，您可以检查 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")
}

（请注意，我在您的登录和注册按钮中输入了 id）

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

为了解释，location.hash 属性设置或返回 URL 的锚部分，包括井号 (#)。然后在我们从 url 中获取主题标签后，我们可以检查我们的主题标签中是否有“登录”字样

【讨论】：

【解决方案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 = "new word" 更改 url 主题标签

【讨论】：