Question

如果我的标题不能解释我的问题以及我想要完成的内容，我道歉。所以我有一个我正在构建的网站的登录页面，在登录页面上，我添加了一个标签，这是另一个div，按下Register“tab”后，一个jquery处理clickevent并切换到新的div。这是切换的代码。

<script>
$(function () {

    $('#login-link').click(function (e) {
        $("#login-form").delay(100).fadeIn(100);
        $("#register-form").fadeOut(100);
        $('#register-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
    });
    $('#register-link').click(function (e) {
        $("#register-form").delay(100).fadeIn(100);
        $("#login-form").fadeOut(100);
        $('#login-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
    });

});

这是持有“标签”的div

div class="row">
                    <div class="col-xs-6">
                        <a href="/login/login" class="active" id="login-link">Login</a>
                    </div>
                    <div class="col-xs-6"><a href="/login/register" id="register-link">Register</a>
                    </div>
                </div>

对于每个div，登录和注册，它们都是各自的形式，并由servlet使用action="${pageContext.servletContext.contextPath}/处理，以便在提交事件时将参数从jsp传递给servlet。

我的问题以及我在解决问题时遇到的问题是如何切换到div，无论是从登录到注册还是反之，都是要更改页面的URL。原因是servlet将错误传递给jsp而我无法正确显示它们，因为切换到另一个div包含错误的链接。

我相信这样做的方法是通过javascript / jquery，但我似乎无法找到一种方法来做到这一点。甚至可能有一种更好的方法可以做到这一点，我完全没有意识到这一点。

Answer 1

我认为您正在寻找在URL栏上更改窗口URL的方法，当用户从登录表单移动到注册表单时，反之亦然。如果您的目标是支持HTML5的浏览器，则可以使用history.pushSate() API。

使用history.pushState() API在本地操纵浏览器历史记录，但需要注意的是，当您点击history时，使用此API在Back中所做的更改将无法加载页面浏览器的Forward按钮。在这种情况下，您将不得不添加另一个事件侦听器popstate，并明确地调用window.reload()以从Web服务器加载网页。我在这里提供了文档链接和示例链接，因此，除非您对此API的优缺点不是100％有信心，否则您可以为用户介绍应用程序使用情况。

MDN详细记录了有关history API的更多信息。同样的例子在CSS-TRICKS

解释

在jsp中切换选项卡时切换URL

1 个答案: