Question

作为练习，我试图让我在导航栏中的链接收缩内容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（）发送它时，它会显示“undefined”。我猜我没有正确地抓住属性，所以这就是它挂起的地方！我如何正确地获取您单击的链接的href属性？

Answer 1

我很确定你真正想要的是捕获被点击的元素的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()。

Answer 2

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

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

用jquery替换href单击行为

2 个答案: