-1

私はjqueryとjavaスクリプトを学んでいますが、まだ十分ではありません。トグル エフェクトを作成しようとしていますが、実現できません。これが可能かどうかここで尋ねています。ここに何がありますか：

Div 内に 2 つの div があります: js Fiddle のリンク: http://jsfiddle.net/saifrahu28/zzju3/2/

私が作ろうとしているのは: まず、ページが読み込まれると、青い Div が表示され、緑が非表示になるはずです。そして、彼内の3つのリンクのいずれかをクリックすると、 Blue Div Green Div が表示され、 Blue Div が非表示になります。緑の場合も同じです。横のリンクをクリックすると、緑の Div は 青の div を開き、緑を非表示にする必要があります。これは可能ですか？

彼のコードは次のとおりです。

HTML

<div style="width:300px; height:200px; background:#FFC;">
   <div class="blueDiv">
    <a>Click Me to Hide Blue Div 1</a>
            <a>Click Me to Hide Blue Div 2</a>
            <a>Click Me to Hide Blue Div 3</a>
   </div>

   <div class="GreenDiv">
     <a>Click Me to Hide Green Div and Show Blue Div Div</a>
   </div>
</div>

CSS

.blueDiv{


width:200px;
height:100px;
background:#09F;
}

.GreenDiv{
 width:250px;
 height:150px;
 background:#0C9;
}  

a{ text-decoration:none;
cursor:pointer;
font-size:10px;

 }
4

4 に答える 4

1

これを試すことができます：

$(function(){
  var blueDiv = $('.blueDiv');
  var greenDiv = $('.GreenDiv').hide();

  blueDiv.find('a').click(function(){
      blueDiv.hide();
      greenDiv.show();
  });
  greenDiv.find('a').click(function(){
      greenDiv.hide();
      blueDiv.show();
  });
});

更新: 動作するJS Fiddleを追加

于 2013-06-03T14:57:21.397 に答える
0

http://jsfiddle.net/zzju3/3/

$('.blueDiv').click(function() {
                $('.blueDiv').hide();
            });

$('.GreenDiv').click(function() {
                $('.GreenDiv').hide();
        $('.blueDiv').show();
            });

どうぞ。残りは、それで何ができるかを試すことができます。

于 2013-06-03T14:57:42.253 に答える
0

<a>bluediv に3 つのタグがある理由はわかりませんが、これでうまくいくはずです。この$('a')セレクターはすべてのアンカー タグを取得するため、コードの他の部分で問題が発生する可能性があることに注意してください (ページに複数のアンカー タグがある場合)。aこの機能に使用したいすべてのタグにクラスを追加してから、そのように取得する価値があるかもしれません$('.myAnchorClass')

$(document).ready(function(){
   $('a').click(function(){  //Attach click event function to each anchor tag
       if($(this).closest('div').hasClass('GreenDiv')){
           $('.blueDiv').show();
       }  else {
           $('.GreenDiv').show();
       }
       $(this).closest('div').hide();
   });
});
于 2013-06-03T14:58:01.810 に答える