4

このトピックの回答＃1のコードを使用しています-「div onclickを表示し、それをトリガーした画像を非表示にします」

<img src="Icons/note_add.png" onclick="show('comment', this)"/>
then the function would apply a "display none" to it:

function show(target, trigger){
   document.getElementById(target).style.display = 'block';
   trigger.style.display = "none"
}

うまく機能しますが、この onclick 機能を使用してページに 4 つの div があります。ユーザーが画像 1 をクリックすると、div 1 が表示されますが、画像 2 をクリックして div 2 を切り替えると、div 1 は引き続き表示されます。

別のものが表示されるようにトリガーされたときに開いているdivが閉じるようにするにはどうすればよいですか? ページで 1 つの div のみを開きたいのですが、現在、4 つすべてを開くことができます。

4

3 に答える 3

16

方法 1

これは、 jQueryコードを使用すると、はるかに簡単に実行できます。

例はこちら

HTML 

<img id="img1"/>
<img id="img2"/>
<div id="div1"/>
<div id="div2"/>
<div id="div3"/>
<div id="div4"/>

Jクエリ

$("#img1").on('click', function() {
   $(this).hide();
   $("#div2, #div3, #div4").hide();
   $("#div1").show();
});

表示/非表示を、画像をクリックしたときに表示または非表示にするものに置き換えるだけです。

トップヒント: show/hide を toggle() または fadeIn() /fadeOut() に置き換えることもできます

toggle() : クリックするたびに表示ブロックと非表示を交互に切り替えます。

fadeIn() : show() と同じことを行いますが、素敵なフェード アニメーションを伴います。

方法 2

新しい方法は、CSS アニメーションを使用することです。テストでは、CSS は jQuery よりもアニメーション処理のパフォーマンスが優れていることが示されています。

例はこちら

HTML 

<div id="imgWrap">
    <img id="img1" class="Active" data-box="div1"/>
    <img id="img2" data-box="div2"/>
    <img id="img3" data-box="div3"/>
    <img id="img4" data-box="div4"/>
</div>

<div id="divWrap">
    <div id="div1" class="Active">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
</div>

CSS 

#divWrap div{
    opacity:0;
}
#divWrap .Active{
    opacity:1;
    -webkit-animation:fadeIn ease-in-out 0.5s;
    animation:fadeIn ease-in-out 0.5s;
}
@-webkit-keyframes fadeIn{
    from{opacity:0;}
    to  {opacity:1;}
}
@keyframes fadeIn{
    from{opacity:0;}
    to  {opacity:1;}
}

要素が表示されていないときにページスペースを予約したくない場合は、追加display:none/blockしてopacity ください（フィドルを参照） 。

CSS を使用する利点は、アニメーションを自由に作成できることです。Activeこのコードは、クラスが要素に追加されたときにアニメーションをトリガーするだけです。

アニメーションの例をいくつか示します。

ジャバスクリプト 

$('img').on('click', function () {
  var divID = $(this).attr('data-box');
  $(this).addClass('Active').siblings().removeClass('Active');
  $('#' + divID).addClass('Active').siblings().removeClass('Active');
})

最後に、上記のように JavaScript または jQuery を追加して、クリック時に Active クラスを追加します。この例では、ページの読み込み時にデフォルトのアクティブ要素を作成するために、Active が html 内の 1 つの要素にハードコーディングされています。

このコードは、クリックされたボタンにも Active を追加します。これはオプションですが、現在アクティブなボタンに CSS スタイルを追加するために使用できます。

于 2013-10-08T15:12:46.037 に答える
3 
var old_target,old_trigger;
function show(target, trigger){
   if(old_target!==undefined) document.getElementById(old_target).style.display = 'none';
   if(old_trigger!==undefined) old_trigger.style.display = "block";
   document.getElementById(target).style.display = 'block';
   trigger.style.display = "none"
   old_target = target;
   old_trigger = trigger;
}

最後にクリックしたターゲット/トリガーへの参照を保存し、その古い参照のスタイルを変更するだけです。

于 2013-10-08T15:09:08.290 に答える