使用 JQuery PreventDefault()，但仍将路径添加到 URL

发布于 2024-11-28 04:43:50 字数 525 浏览 0 评论 0原文

我正在开发一个网站，点击某个链接将会滑下登录面板。我使用 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，但它跳过了登录面板的动画。单击链接时，面板会立即出现。我想保留动画和更新的网址行为。这可能吗？

原文

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.

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');
});

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌梦深 2024-12-05 04:43:50

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

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

});

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'); });

});

回复收藏 0 原文