用 jquery 替换 href 点击行为答案

【问题标题】：Replacing href click behavior with jquery用 jquery 替换 href 点击行为
【发布时间】：2013-07-28 17:04:00
【问题描述】：

作为一个练习，我试图让导航栏中的链接与内容 div 收缩，使用 ajaxpage() 在#content 中加载页面，然后将其向下滑动。我正在使用以下内容：

编辑：我意识到我可能需要回调函数中的所有内容，所以我解决了这个问题。但是，电话仍然无法正常工作。

$(document).ready(function()
  {
  $("a.link").click(function() { 
    //...
    return false;
});
  $("#navbar a").click(function(){
    $("#content").slideUp(500,function(){
        var a_href = $(this).attr('href');
        ajaxpage(a_href, 'content');
        $("#content").slideDown(500);
        });
  });
});

链接为：

<a class="link" href="home.php">Home</a>

当我测试它时，内容 div 正确地向上滑动，但随后它停留在那里，没有其他任何事情发生。我在这里做错了什么？

编辑：经过一些调试，似乎这是罪魁祸首：

var a_href = $(this).attr('href');

当我声明该变量并通过 alert() 发送它时，它显示“未定义”。我猜我没有正确抓住这个属性，所以这就是它挂断的地方！我将如何正确获取您单击的链接的 href 属性？

【问题讨论】：

您的 AJAX 调用可能失败，ajaxpage 函数的邮政编码。我还可以告诉你调用可能是异步的，所以你的slideDown 应该在 AJAX 回调中。
是的，我正在修复它！ ajax 调用工作正常，因为我可以在 href 中使用它而不会失败： href="javascript:ajaxpage('home.php', 'content')"
你能分享一下小提琴中的html吗？

标签： javascript jquery

【解决方案1】：

当你确定href时，你应该在点击后使用attr()。

$("#navbar a").click(function(){
    var a_href = $(this).attr('href');
    $("#content").slideUp(500,function(){
        ajaxpage(a_href, 'content');
        $("#content").slideDown(500);
        });
  });

【讨论】：

【解决方案2】：

我很确定您真正想要的是捕获被点击元素的 href。

$("#navbar a").click(function(){
    var a_href = $(this).prop('href');
    $("#content").slideUp(500,function(){
        ajaxpage(a_href, 'content');
        $("#content").slideDown(500);
    });
});

但我们很清楚，在 ajax 调用返回任何数据之前，$('#content').slideDown(500);即将开火。你需要给ajaxpage添加一个回调来接受$.ajax()的成功函数，这样你就可以确定何时到slideDown()。

【讨论】：