Question

我正在一个网站上工作，点击某个链接会在登录面板上滑下来。我正在使用event.preventDefault()来阻止网站重定向以及动画事件以向下滑动面板。单击链接后，面板向下滑动，网址保持不变。

单击链接时我想要的是让面板正常动画，但链接的href属性将显示在url中。在这种情况下，它将是这样的：http://domain_name/#login。

以下是我现在的代码：

$("#login_link").click(function (e) {
    e.preventDefault();
    $("#login").animate({ 'margin-top': 0 }, 600, 'linear');

    window.location.hash = $(this).attr('href');
});

此代码根据需要成功地将“＃login”添加到网址，但它会跳过登录面板的动画。单击链接时，面板会立即显示。我想保留动画和更新的url行为。这可能吗？

Answer 1

使用下面的代码。只需在动画完成事件中调用哈希。

$("#login_link").click(function (e) {
    e.preventDefault();
    $("#login").animate({ 'margin-top': 0 }, 600, 'linear', function(){  window.location.hash = $(this).attr('href'); });

});

Answer 2

我不确定，但您可能正在寻找此功能

1＆GT;当某个机构点击登录时，网址会更改为abc.com/#login，并且会出现登录面板动画

或

2＆gt;当某个机构只在url中键入abc.com/#login时，您会期望相同的行为（登录面板的动画）。

您目前正在做的事情仅适用于case1 ，并且不适用于case2。如果你想要动画（或其他）同时工作，点击或只输入网址。您需要一些机制来检测哈希更改。

有一个着名的插件http://benalman.com/projects/jquery-bbq-plugin/

去看看这个插件，看看事情是如何完成的。如果您发现任何难以理解的东西，我们就在这里!!

使用JQuery preventDefault（），但仍然添加URL的路径

2 个答案: