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

たとえば、ボックスのクリックを偽造することができます

$("#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 を使用し、html だけを抽出#boxして現在のページに挿入することです。これには、新しい履歴 API またはアンカーを使用することもできます。主な利点は、JS がオフになっている場合でもページを使用できることです。(ミス)これに name やその他の html 属性を使用するのは、本当に悪い習慣です。必要に応じて、data 属性を使用してください。

（コードはテストされておらず、アイデアを提供するための簡単で汚い方法です。）

于 2012-06-03T00:05:30.393 に答える