使用 JQuery preventDefault()，但仍将路径添加到 URL答案

【问题标题】：Use JQuery preventDefault(), but still add the path to the URL使用 JQuery preventDefault()，但仍将路径添加到 URL
【发布时间】：2011-08-07 06:02:54
【问题描述】：

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

点击链接时我希望面板正常动画，但链接的 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，但它跳过了登录面板的动画。单击链接时，面板会立即出现。我想保留动画和更新的 url 行为。这可能吗？

【问题讨论】：

这可能是一个愚蠢的问题，但是当window.location.hash这行代码被注释掉时，你确定jquery动画是有效的吗？
您能接受对您提出的问题的回答吗？我敢肯定，他们中至少有一些人给出了不错的答案……人们通常喜欢对他们的工作进行认可。
省略e.preventDefault() 行会发生什么？

标签： javascript jquery preventdefault

【解决方案1】：

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

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

});

【讨论】：

我删除了我的，所以只有在我发布后才属于你:)

【解决方案2】：

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

1>当一些body点击登录时，url变为abc.com/#login，出现登录面板动画

或

2 > 当一些正文只是在 url 中键入 abc.com/#login 时，您期望相同的行为（登录面板的动画）。

您目前正在执行的操作仅适用于 case1，不适用于 case2。如果您希望动画（或其他）在单击时或仅输入 url 时同时工作。您需要一些机制来检测哈希更改。

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

去看看这个插件，看看事情是怎么做的。如果您发现任何难以理解的内容，我们就在这里！

【讨论】：