使用JQuery preventDefault（），但仍然添加URL的路径 [英] Use JQuery preventDefault(), but still add the path to the URL

问题描述

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

I am working on a website where clicking on a certain link will slide down a login panel. I am using event.preventDefault() to stop the site from redirecting as well as an animation event to slide the panel down. When the link is clicked, the panel slides down and the url remains unchanged.

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

What I want to happen when the link is clicked is for the panel to animate as normal, but for the href attribute of the link to be shown in the url. In this case it would be something like this: http://domain_name/#login.

这是代码我现在就开始了：

Here is the code I've got going right now:

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

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

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

This code successfully adds the '#login' to the url as desired, but it skips the animation of the login panel. When clicking the link the panel just appears instantly. I would like to keep both the animation and the updated url behaviors. Is this possible?

推荐答案

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

use below code . just call the hash in animation completed event.

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

});

这篇关于使用JQuery preventDefault（），但仍然添加URL的路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！