1

sを含むシンプルなメニューがあり<ul>、すべての ul がそのコンテンツをクリックして div にロードします。訪問者がページを開いたときに読み込まれるデフォルトのコンテンツを、現在のdiv1ようにすべてのコンテンツ (div1 + div2 + div3 + div4) ではなく、id を持つコンテンツに設定しようとしています。ここに私のコードがあります: http://jsfiddle.net/EPvGf/ ページを開くと、

First Div
Second Div
Third Div
Fourth Div

First Divデフォルトのコンテンツとしてのみ読み込まれるようにしたい。

4

4 に答える 4

2

ドキュメント準備完了イベントですべての div を非表示にし、最初の 1 つだけを表示します (表示するデフォルトの 1 つ)。最初のものを取得するfirstには、コレクションでメソッドを使用できます

$(document).ready(function()
{
    $('.pbox:visible').fadeOut();
    $('.pbox').first().fadeIn();

    //your other click event code goes here
});

作業サンプル: http://jsfiddle.net/EPvGf/6/

于 2013-06-12T15:57:00.420 に答える
2

フィドルを更新しました: http://jsfiddle.net/EPvGf/1/

$(document).ready(function()
{
    $('#menu').on('click','a',function()
    {
        // fade out all open subcontents
        $('.pbox:visible').fadeOut();
        // fade in new selected subcontent
        $('.pbox[id='+$(this).attr('data-id')+']').fadeIn();
    }).find('a:first').click();
});

実際に私がしたことはa、ページがロードされたときに最初にクリックしたことだけです。速くて汚い。

読み込み時に es を非表示.pbox: css に追加し.pbox { display:none; }ます。フィドル: http://jsfiddle.net/EPvGf/8/

于 2013-06-12T15:53:35.493 に答える
1

css を追加することもできます。

.pbox { display:none; }
.in { display: block; }

そしてhtmlを変更します：

<div class="pbox in" id="div1">First Div</div>
于 2013-06-12T16:00:26.730 に答える
1

次のコードを使用します。

$(document).ready(function()
{
    $('#div1').fadeIn();
    $('#menu').on('click','a',function()
    {
        // fade out all open subcontents
        $('.pbox:visible').fadeOut();
        // fade in new selected subcontent
        $('.pbox[id='+$(this).attr('data-id')+']').fadeIn();
    });
});

そして、このルールをあなたのスタイルに追加してください:

.pbox {display: none;}
于 2013-06-12T16:00:37.607 に答える