0

リンクを使用して、wordpress ページからカスタム テンプレートの div にコンテンツを読み込もうとしています。

非表示の div が 1 つあり、コンテンツがロードされたときに slideDown で表示する必要があります。

onClickなどでこの1つのdivにロードしたいさまざまなページへのリンクがいくつかあります。

例:

次のリンクがあるとします:
- リンク 1 (ホーム)
- リンク 2 (概要)
- リンク 3 (連絡先)

訪問者がこれらのリンクをクリックすると、次のようなことが起こるはずです:

リンク 2 をクリックします --> div にロードします --> div は、slideDown などで表示されます。

リンク 3 をクリック --> 以前に読み込まれたコンテンツがフェードアウトし、リンク 2 のコンテンツがフェードインする

リンク 2 をクリック (もう一度) --> リンク 2 をクリックした場合と同様のアクション...

リンク 1 をクリック --> div をクリアし、slideUp などで非表示にします。

リンク 2 または 3 がアクティブで、ユーザーが同じリンクをもう一度クリックした場合 --> リンク 1 のクリックと同様のアクション

途中で役立つコードをいくつか見つけましたが、まだそこにはいません。
私がこれまでに持っているものは次のとおりです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
      $('#navigationMenu a').click(function() { // When a menu item is selected
            $('#maincontent').load($(this).attr('href')); // Load its linked page into the div
            return false; // And prevent it following the link
      });
});

function toggleSlider() {
    if ($("#maincontent").is(":visible")) {
        $("#sec-content").animate(
            {
                opacity: "0"
            },
            600,
            function(){
                $("#maincontent").slideUp();
            }
        );
    }
    else {
        $("#maincontent").slideDown(600, function(){
            $("#sec-content").animate(
                {
                    opacity: "1"
                },
                600
            );
        });
    }   
}

</script>

SO の関連記事でこのコードを見つけました。これにより、slideUp/slide/down 機能を使用してコンテンツを div にロードできます。
ただし、リンク 3 (例では) をクリックすると div が閉じられるため、リンクをもう一度クリックしてもう一度読み込む必要があります。
そして、ホーム リンクであるリンク 1 は、私が望んでいたことをまだ行っていません。

これについてもう少し知識のある人がここで私を助けてくれることを願っています.
できることはありますか？

ありがとう！

---- 編集されたコード 02/08/13 ----

<script type="text/javascript">

$(function() {
      $('#navigationMenu a').click(function() { // When a menu item is selected
            $('#maincontent').load($(this).attr('href')); // Load its linked page into the div
            return false; // And prevent it following the link
      });
});

var lastData;
$(function () {
    $("a").click(function(event) {
        loadData($(this).attr("href"));
        event.preventDefault();
    });
});

function loadData(data) {
    if(lastData == data) {
        $("#maincontent").slideUp();
    } else {
        $("#maincontent").html(data);
        $("#maincontent").slideDown();
    }
    lastData = data;
}

</script>

結果はhttp://tobba.org/noで見ることができます

4

1 に答える 1

1

次のような機能を試すことができます: リンクがクリックされたとき、それが最後にクリックされたリンクかどうかを確認します。もしそうなら、slideUp()。そうでない場合は、データをそこに入れるように取得し、データが利用可能になったら、ボックスに入力してスライドダウンします。

この例では中途半端かもしれませんが、必要なデータを取得するには $.get または $.load を使用する必要があります。注: lastData は関数のスコープ外で宣言されているため、関数の終了時に値が失われません: http://jsfiddle.net/turiyag/9na6K/

function loadData(data) {
    if(lastData == data) {
        $("#dataview").slideUp();
    } else {
        $("#dataview").html(data);
        $("#dataview").slideDown();
    }
    lastData = data;
}
于 2013-02-06T14:21:06.447 に答える