Javascript 点击菜单中的链接时在jquery中加载Ajax

我不熟悉Jquery和Ajax，现在已经尝试解决一个问题1个多小时了

你可以在这里看到这个页面：（如果你在绿色区域点击，它会产生我想要的效果。）

几乎所有的东西都能按我所希望的那样工作，除了我不能使用顶部的菜单来让这些框像单击绿色div时那样进行分层和加载内容

所以我想从你们这里得到一些关于我如何解决这个问题的意见，另一个观点

$(window).load(function(){
$(".box").click(function(){
$(this).animate({
top: '-50%'
}, 500, function() {
$(this).css('top', '150%');
$(this).appendTo('#container');             
$(".loadinghere").load($(this).attr('name'));
});
$(this).next().animate({
top: '50%'
}, 500);
});
}); 

---

这是我得到的最接近的，但是链接根本不起作用

你可以用e来假装点击框。g

$("#box1").click();

但我会做完全不同的事情：

<a href="107.html?nr=2" class="show">About me!</a>
<a href="108.html?nr=2" class="show">Portraits</a>
<a href="107.html?nr=2" class="show">Weddings</a>
<a href="109a.html?nr=2" class="show">Action</a>


<script type='text/javascript'> 
$(document).load(function(){
    $("a.show").on("click", function(e){
        e.preventDefault();
        var click=$(this);
        var link=click.attr("href")+"#box";
        $("#box").after("<div id='box2' />").load(link, function(){
            $(this).animate({
                // your effect and stuff
            });
            // Rename the new box and throw out the old one
            // Make sure, it is not visible
            $("#box").remove();
            $("#box2").attr("id","box");
        });
    });
}); 
</script>

$（文档）.load（函数（）{
$（“a.show”）。在（“单击”）上，函数（e）{
e、 预防默认值（）；
var click=$（这个）；
var link=click.attr（“href”）+“#box”；
$（“#框”）。在（“”）之后。加载（链接，函数（）{
$（此）。设置动画({
//你的效果和东西
});
//重新命名新盒子，扔掉旧盒子
//确保它不可见
$（“#框”）.remove（）；
$（“#box2”）.attr（“id”，“box”）；
});
});
}); 

我们的想法是，使用完整的html，从

#框

中提取html并将其插入当前页面。您还可以为此使用更新的历史api或锚点。主要的优点是，如果JS被关闭，你仍然可以使用你的页面。（小姐）使用name或其他html属性进行此操作是非常糟糕的做法。如果需要，请使用“数据”属性

---

（代码未经测试，只是为了给你一个想法。）

你想动态加载内容吗？页面加载很好，问题是我无法将导航链接到脚本，没有一些bug。对不起，我不明白这个问题。你的意思是，你不知道，如何告诉脚本，加载哪个页面？你检查过链接了吗？如果你点击绿色的大框，它就可以正常工作了。它会得到我想要的页面，但是如果你看顶部，我有一个菜单，如果你点击“关于我”，那么我想要你点击绿色大框得到的效果。谢谢你，奥利弗。尝试了这个，结果是我被链接到了这个页面。但我会尝试并尝试去理解问题所在。：）在单击处理程序的末尾添加

return false

以停止浏览器加载页面无论我尝试什么，都会进入新页面。

preventDefault（）

应该可以防止这种情况！？在on处理程序中添加

return false

，不会有任何影响。我想没有它IE会有问题，但我不确定。您需要使用完整的html页面和名为box的div来工作。我没有提到，所以我现在提到了。：-）jQuery将从此框中提取html。也许代码中也有错误，jQuery将返回正常行为。查看javascript控制台了解更多信息。仍然会得到相同的结果。完整的HTML页面是什么意思？加载的HTML页面需要有box元素吗？