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

Question

如果我的标题不能很好地解释我的问题和我试图完成的内容，我深表歉意。所以我有一个我正在构建的网站的登录页面，在登录页面上，我添加了一个选项卡，它实际上是另一个div，在按下注册"选项卡"时，一段 jquery 处理点击事件并切换到新的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 会在本地操作浏览器历史记录，但应该注意的是，当您单击浏览器的Back或Forward按钮时，使用此 APIhistory所做的更改将不会加载页面。在这种情况下，您必须添加另一个事件侦听器popstate，并显式调用window.reload()以从Web服务器加载网页。我在这里提供文档链接和示例链接，以便在您对此 API 的优缺点没有 100% 的信心之前，您可以为用户引入应用程序使用问题。

有关historyAPI的更多信息在MDN中有很好的文档。CSS-TRICKS中也解释了示例