8

Two divs 間で JQuery を使用していくつかのトグル効果を作成する際に問題に直面しています。私はjQueryのレベルが非常に低いです。そして、その知識で、2つの div を切り替えることができませんでした。

JS フィドルの現在のコード: http://jsfiddle.net/WSCBu/

私は 3 つの Divs クラス名 Blue 、 Gray 、および orange を持っています。私が作ろうとしているのは、ページの読み込み時に青とグレーの 2 つの div のみが表示され、グレーの div で「表示」というテキストをクリックすると、グレーの div が非表示になり、オレンジの Div が表示されます。Orange div の「Hide」テキストをクリックすると、この Orange div が非表示になり、再び Gray div が表示されます。トグル機能でできるかも？どうすればいいのかよくわかりません。エキスパートが簡単にできることを願っています！誰かが私にプロセスを見せてくれたら、とても感謝します.

ここにHTMLがあります

<div class="blue"></div>
<div class="gray">
  <p> Show --> </p>
</div>
<div class="orange">
  <p> -- Hide </p>
</div>

CSS

.blue{

height:100px;
width:250px;
background:#1ecae3;
float:left;
}
 .gray{

height:100px;
width:100px;
background:#eee;
float:left;    
 }

  .orange{
  height:100px;
  width:150px;
  background:#fdcb05;
  float:left;     
 }
4

8 に答える 8

24

あなたが推測toggle()したように、仕事をします。または のいずれ.grayか.orangeをクリックすると、両方の表示を切り替えます。

$('.orange').hide();

$('.gray, .orange').on(
  'click',
  function() 
  {
    $('.gray, .orange').toggle()
  }
);


$('.orange').hide();
$('.gray, .orange').on('click',
  function() {
    $('.gray, .orange').toggle()
  }
);
.blue {
  height: 100px;
  width: 250px;
  background: #1ecae3;
  float: left;
}

.gray {
  height: 100px;
  width: 100px;
  background: #eee;
  float: left;
}

.orange {
  height: 100px;
  width: 150px;
  background: #fdcb05;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue"></div>
<div class="gray">
  <p>Show --></p>
</div>
<div class="orange">
  <p>-- Hide</p>
</div>

于 2013-08-07T18:01:07.380 に答える
0

次のコードと同じくらい簡単だと思います。コードの並びはご容赦ください。私の携帯電話でそれに答えます:)

<style>
.blue{

height:100px; width:250px; background:#1ecae3; float:left; } 

.gray{

height:100px; width:100px; background:#eee; float:left; }

.orange{ height:100px; width:150px; background:#fdcb05; float:left; display:none;}
</style>

 <div class="blue"></div>
 <div class="gray"> <p> Show --> </p> </div>
 <div class="orange"> <p> -- Hide </p> </div>

<script>
$(".gray p").click(function() {
$(".gray").hide();
$(".orange").show();
});

 $(".orange p").click(function() {
 $(".gray").show()
 $(".orange").hide();
 } );
 </script>
于 2013-08-07T18:22:06.840 に答える