2

この JQuery スクリプトを見つけてカスタマイズしました。このスクリプトは、異なるリンクが押されたときに異なるコンテンツを表示します。

ただ、targetDiv が既に表示されている場合は、変更効果をフェードにしたいので、targetDiv を開いたり閉じたりするときのスライド効果のみです。

また、ページの読み込み時にコンテンツが約0.5秒で表示される理由がわかりません。それを避けることはできますか？

これはJSFiddleにあります：http://jsfiddle.net/XwN2L/179/

JQuery (最新バージョン):

jQuery(function(){
    jQuery('.targetDiv').hide();

    jQuery('#close').click(function(){
              jQuery('.targetDiv').slideUp();
    });

        jQuery('.showSingle').click(function(){
              jQuery('.targetDiv').hide();
              jQuery('#div'+$(this).attr('target')).slideDown();
        });
});

HTML:

<div class="buttons">
<a  class="showSingle" target="1">Div 1</a>
<a  class="showSingle" target="2">Div 2</a>
<a  class="showSingle" target="4">Div 4</a>
<a id="close">Close</a>
</div>

<br><br><br><br>
Lorem Ipsum<br>

<div id="div1" class="targetDiv">
<iframe width="420" height="315" src="http://www.youtube.com/embed/c1_LON8Ib2o" frameborder="0" allowfullscreen></iframe>
</div>

<div id="div2" class="targetDiv">
<iframe width="420" height="315" src="http://www.youtube.com/embed/s4GbpG-PypM" frameborder="0" allowfullscreen></iframe>
</div>

<div id="div4" class="targetDiv">
<iframe width="560" height="315" src="http://www.youtube.com/embed/DHef3iAjxiM" frameborder="0" allowfullscreen></iframe>
</div>
Lorem Ipsum
4

1 に答える 1

2

ワーキングデモ http://jsfiddle.net/efgFL/2/

is(':visible')リンクを使用: http://api.jquery.com/visible-selector/

2番目の部分では、blahテキストは表示/非表示が発生しているコンテナにありません。

お役に立てれば、

コード

jQuery(function(){
    jQuery('.targetDiv').hide();

    jQuery('#close').click(function(){
              jQuery('.targetDiv').slideUp();
    });

        jQuery('.showSingle').click(function(){
            if( jQuery('.targetDiv').is(':visible')){
                jQuery('.targetDiv').hide();
               jQuery('#div'+$(this).attr('target')).fadeIn();
            }else{
              jQuery('.targetDiv').hide();
              jQuery('#div'+$(this).attr('target')).slideDown();
            }
        });
});​
于 2012-06-23T11:09:31.740 に答える