0

2 つのリンクと 2 つの div があります。div 2 が非表示のときに div 1 を表示したい。div 2 を表示するときは、div 1 を非表示にします。私はこのコードを書いてみましたが、うまくいかないようです.(最初の部分のみ.videos divは隠されています)

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function() {
   $('#videos').hide();
 });

$('#show_images').click(function(){
    $('#videos').hide();
    $('#images').show();
});

    $('#show_videos').click(function(){
        $('#images').hide();
        $('#videos').show();
    });

    </script>
    <a id="show_images" class="button" href="#">Images</a>
    <a id="show_videos" class="button" href="#">Videos</a>

<div id="images" class="images"></div>
<div id="videos" class="videos"></div>
4

4 に答える 4

3

クリック ハンドラーを dom Ready コールバックにバインドするコードを配置するか、2 つの div の準備ができていないときにコードが実行されます。

$(document).ready(function() {
   $('#videos').hide();

  $('#show_images').click(function(){
    $('#videos').hide();
    $('#images').show();
  });

  $('#show_videos').click(function(){
    $('#images').hide();
    $('#videos').show();
  });
});
于 2012-07-05T05:40:56.747 に答える
1

他のソリューションは完全に機能しますが、ここに短いバージョンがあります

$(document).ready(function()
   {
   $('#videos').hide();

   $('[id^=show_]').click(function(){
      $('#videos').toggle();
      $('#images').toggle();
      });
   });
于 2012-07-05T05:52:17.400 に答える
0

上記のクエリには別の方法があります。

$(function(){
   $('#show_images').click(function(){
      $('#videos').hide();
      $('#images').show();
  });
  $('#show_videos').click(function(){
        $('#images').hide();
        $('#videos').show();
  });
  $('#show_images').trigger('click');
});

コードビンで上記のソリューションを試すことができます http://codebins.com/codes/home/4ldqpbm

于 2012-07-05T06:51:10.917 に答える
0 
$(document).ready(function() {
   $('#videos').hide();


$('#show_images').click(function(){
    $('#videos').hide();
    $('#images').show();
});

$('#show_videos').click(function(){
    $('#images').hide();
    $('#videos').show();
});
}); //close document ready here
于 2012-07-05T05:41:41.487 に答える