根据#hash添加/删除CSS类

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";
  }
});