javascript - 根据#hash 添加/删除 CSS 类

标签 javascript jquery html css class

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

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

我怎样才能做到这一点? 非常感谢您的帮助!

亚罗。

最佳答案

读取哈希的简短脚本应该做的:

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

关于javascript - 根据#hash 添加/删除 CSS 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37612984/

相关文章:

javascript - 从函数创建 ES6 类

用于带有动态列的 ASP.NET 的 jQuery 网格

javascript - jQuery 选择器 ':not()' 或方法 '.not()' 在 IE9 中的行为

javascript - 如何让这个 jQuery 文本消失?

javascript - 只有在缓冲完整的视频后才开始播放 HTML5 视频

javascript - 有什么方法可以为 Javascript 数组中的惰性变量定义 getter?

Javascript:如何将有符号的 Char 数组转换为 Float (也许使用 IEEE754)?

jquery - 将对象推送到数组而不从 DOM 中删除

javascript - 在 Apexcharts.js 中限制 x 轴

php - 当我有动态表时能够更新 'Button Click' 上的行