Question

我的网站上有两个表格。一个.login-form和一个.registration-form。默认情况下，登录表单具有display: block属性，注册表单具有display: none属性。我有一个按钮可以在两种形式之间切换。已经很漂亮了。

现在我想根据url哈希切换这些属性。因此，如果您访问/user.html#registration我想首先看到注册表单而不是登录表单。

我怎样才能实现这一目标？我非常感谢你的帮助！

哈罗。

Answer 1

读取哈希的简短脚本应该：

<script>
// Add this block to where your "after page load" code starts. 
// If you use a framework, you should adjust the solution to your framework.
if (location.hash && location.hash === "#registration") {
    // or whichever way your app switches between the two
    document.body.classList.add("show-registration");
} // else it'll show login, as intended.
</script>

如果您的CSS尚未设置好：

<style>
body.show-registration .login-form {
    display: none;
}
body.show-registration .registration-form {
    display: block;
}
</style>

Answer 2

我认为这几乎就是你要找的东西：

window.addEventListener("hashchange", () => {
  if (window.location.hash === "registration") {
     document.querySelector(".registration-form").style.display = "block";
  }
});

基于#hash添加/删除CSS类

2 个答案: