Javascript 如何为单页jQuery登录、注册和忘记密码表单适当更改url

我正在使用CodeIgniter、jQuery等做一个应用程序。 它有一个页面，其中有3个表单用于登录、注册和忘记密码。所有这些都驻留在一个页面中

默认情况下，将显示登录页面（登录表单），单击“注册”，将显示注册表单，无需重新加载。我通过在视图中为每个表单创建不同的部分来实现这一点，然后使用jquery调用该部分，该部分使注册表单显示和隐藏登录表单，有一个返回按钮将我带回登录页面

其代码为：

    jQuery('#register-form').click(function () {
            jQuery('.login-form').hide();
            jQuery('.forget-form').show();
        });

        jQuery('#back-btn').click(function () {
            jQuery('.login-form').show();
            jQuery('.forget-form').hide();
        });

我想知道如何使url正常运行，这样我就可以通过访问每个表单的url来访问它

例如，example.com/#register form会将我直接带到我的注册表单，同样通过单击后退按钮，我的url也会相应地改变，就像它的工作方式一样。忘记密码也一样

我尝试了jquery hashchange插件，但就是想不出具体的方法。

---

有谁能告诉我在没有插件帮助的情况下实现这一点的正确方法吗？如果必须使用插件，请推荐一个。

好的，如果我正确理解您的意思，那么您希望根据按钮单击或URL本身使用哈希标记动态显示或隐藏正确的表单。而且，如果可能的话，您希望这不需要插件的帮助

假设我正确理解了这一点，那么下面的代码可能与您要查找的内容大致相同。请注意，我没有把所有的错误处理等都放在示例中，但我相信这里有足够的内容可以帮助“启动”您寻找的方向

一些初始的jquery/javascripting来设置一切

            var urlHref = window.location.href;
        var urlHostName = window.location.hostname;
        var urlPathName = window.location.pathname;
        var urlHashParam = urlHref.split("#");

        $(document).ready(function() {
            $("#hostName").html(urlHostName);
            $("#pathName").html(urlPathName);
            $("#hostHref").html(urlHref);
            $("#hashTag").html(urlHashParam[1]);

            switch(urlHashParam[1]) {
                case "register":
                    manageForms("register");
                    break;
                case "forgot":
                    manageForms("forgot");
                    break;
                default:
                    manageForms("login");
            }

            $('#btnRegister').click(function() {
                manageForms("register");
            });

            $('#btnLogin').click(function() {
                manageForms("login");
            });

            $('#btnForgot').click(function() {
                manageForms("forgot");
            });

        });

        function manageForms(visibleForm) {
            $("#login").hide();
            $("#register").hide();
            $("#forgot").hide();

            $("#" + visibleForm).show();

            if (history.pushState) {
                // only works if the browser supports pushState.
                window.history.pushState("test", "Title", urlPathName + "#" + visibleForm);
            }

        }

基本上，我们在这里所做的是获取windows.login的不同属性，以便我们可以获取我们要查找的值

在切换过程中，我们默认使用登录表单（如果url中没有请求哈希标记，或者请求的哈希标记未知，那么您希望先使用该表单）

您还要求在不重新加载表单的情况下动态修改URL（如果从按钮单击中选择，则使用新标记）。这在现代浏览器中是可能的，但在较旧的浏览器中则不然。这是由

                if (history.pushState) {
                // only works if the browser supports pushState.
                window.history.pushState("test", "Title", urlPathName + "#" + visibleForm);
            }

由于并非所有浏览器都支持该命令，因此在使用该命令之前会快速检查是否支持该命令

最后是代码测试的HTML部分

        HREF: <span id="hostHref"></span>
    <br>
    Host Name: <span id="hostName"></span>
    <br>
    Path Name: <span id="pathName"></span>
    <br>
    Hash Tag Parameters: <span id="hashTag"></span>
    <br>

    <hr>
    <input type="button" id="btnLogin" value="Login">
    <input type="button" id="btnRegister" value="Register for Access">
    <input type="button" id="btnForgot" value="Forgot Password">
    <hr>
    <div id="login">
        This is the Login Section
    </div>
    <div id="register">
        This is the Register Section
    </div>
    <div id="forgot">
        This is the forgot password section
    </div>

HREF:


主机名：


路径名：


哈希标记参数：




这是登录部分
这是登记处
这是忘记密码部分

---

希望其中至少有一些是有用的。

有一些库可以处理所有这些场景。也许你应该看看

Sammy.js

（还有更多，但我只知道这个）

Sammy允许您定义类似于

/#something

的路由，并且每当应用程序到达该路由时，都会执行特定的代码

---

使用制表符而不是隐藏（）和显示（），它的工作原理与您提到的完全相同，这似乎不是适合我的情况的选项。。你能推荐一些其他的方法吗？注册表单实际上是什么，这是html还是什么else@Adnan#登记表是表格的ID。。