0

我是 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);
});
});

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

4

1 回答 1

0

You can just fake the click on the box by using e. g.

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

but I would do it completely different:

<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>

The idea is, to use full html and extract just the html out of #box and insert it on your current page. You can also use the newer history api or anchors for this. The main advantage is, that you can still use your page if JS is turned of. (Miss)using name or other html attributes for this is a really bad practice. If you need to, use the data attribute.

(The code is untested and the quick and dirty way just to give you an idea.)

于 2012-06-03T00:05:30.393 回答