0

簡単なjqueryの問題でガイダンスを得たいと思っています。

ボタンを押したときにコンテンツを表示/非表示にしようとしています。私は2つのボタンを持っています。1 つのボタンに 1 つの div のコンテンツを表示し、もう 1 つのボタンを押して最初の div のコンテンツを非表示にし、2 番目の div のコンテンツを表示したい。

ここで JSFiddle を作成しましたhttp://jsfiddle.net/Yn3tt/1/

私の考えは、noDisplay表示したくないdivに設定されるクラスを切り替えることができるということでした（したがって、それを非表示にします）jqueryがこれを行うかどうかわかりませんか？

これを実現するためにjqueryのshow/hideクラスを使用する方が簡単かどうかもわかりませんか?

ありがとう

私のHTMLは次のとおりです

<button id="opt1">Option 1</button>
<button id="opt2">Option 2</button>

<div class="yesDisplay">
<p>Show me when I press Option 1 and hide Option 2 content</p>
</div>

<div class="noDisplay">
<p>Show me when I press Option 2 and Hide Option 1 content</p>
</div>

私のCSSは単純です

.noDisplay{display:none;}

.yesDisplay{display:block;}

デモはこちらhttp://jsfiddle.net/Yn3tt/1/

4

3 に答える 3

3

hide() show()jquery関数を使用..click()クリック時に発生するイベント...簡単に理解できるように、これをできるだけ単純にしました

CSS

.noDisplay{display:none;}
.yesDisplay{display:none;}

Jクエリ

 $('#opt1').click(function(){
     $('.yesDisplay').show(); //class selector for the div to show
     $('.noDisplay').hide();
 });

$('#opt2').click(function(){
     $('.noDisplay').show();
   $('.yesDisplay').hide();
});

ただし、次のような関数を使用toggle() slideToggle()してコードを減らすことができます

ここでフィドル

于 2013-02-01T08:44:21.393 に答える
1

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

$('#opt1').click(function(){
    $('.yesDisplay').show();
    $('.noDisplay').hide();
});

$('#opt2').click(function(){
    $('.yesDisplay').hide();
    $('.noDisplay').show();
});
于 2013-02-01T08:46:28.883 に答える
1 
u can do this without css ,i mean using jquery
<script>
      $(".yesDisplay").hide();
      $(".noDisplay").hide();
  $("#opt1").click(function(){
      $(".yesDisplay").show();
     $(".noDisplay").hide();
});


  $("#opt2").click(function(){
      $("noDisplay").show();
     $(".yesDisplay").hide();
});
</script>

<button id="opt1">Option 1</button>
<button id="opt2">Option 2</button>

<div class="yesDisplay">
<p>Show me when I press Option 1 and hide Option 2 content</p>
</div>

<div class="noDisplay">
<p>Show me when I press Option 2 and Hide Option 1 content</p>
</div>

ここで確認できますhttp://jsfiddle.net/Yn3tt/7/

于 2013-02-01T08:50:49.383 に答える