Question

我是Jquery和Ajax的新手，现在尝试解决问题超过1小时。

您可以在此处看到此页面：http://smartcreations.se/test/test.html（如果您点击绿色区域，它会产生我希望它具有的效果。）

几乎所有东西都按照我想要的方式工作，除了我不能使用顶部的菜单让盒子像点击绿色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);
});
});

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

Answer 1

你可以使用e假冒盒子上的点击。克。

$("#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>

这个想法是，使用完整的html并从#box中提取html并将其插入当前页面。您也可以使用较新的历史api或锚点。主要优点是，如果启用JS，您仍然可以使用您的页面。（小姐）使用名称或其他html属性这是一个非常糟糕的做法。如果需要，请使用数据属性。

（代码未经测试，快速而肮脏的方式只是为了给你一个想法。）

当从菜单中点击链接时，Ajax在jquery中加载

1 个答案: