1

対応する画像リンクがクリックされるまで、ビューから隠されている 2 つの div があります。そのままで、一方をクリックしてからもう一方をクリックすると、両方のdivを同時に表示できますが、これは望ましくありません。一方がクリックされた場合に他方が表示されないというif文を書き込もうとしていますが、うまくいきませんでした。これが私が考えているJavaScriptで、動作しません：

 $("#about").click(function () {
    if ($("#aboutdetails").fadeIn("slow") == 'true') {
    $("#contact").css({'display': 'none'});
    }
$("#aboutdetails").click("slow",function () {
        $(this).hide();     
    });
});


$("#contact").click(function () {
    if ($("#contactdetails").fadeIn("slow") == 'true') {
    $("#about").css({'display': 'none'});
    }
$("#contactdetails").click("slow",function () {
        $(this).hide();
    });
});

if ステートメントを試みる前の元のコードは次のとおりです。

 $("#about").click(function () {
    $("#aboutdetails").fadeIn("slow", function() {
    $("#aboutdetails").click("slow",function () {
            $(this).hide();
        });
    });
});


$("#contact").click(function () {
   $("#contactdetails").fadeIn("slow", function() {
    $("#contactdetails").click("slow",function () {
           $(this).hide();
        });
   });
});

私はまだ学んでいるので、どちらも非常に雄弁ではありません!

事前に助けてくれてありがとう

4

4 に答える 4

1

したがって、リンク「link1」と「link2」を持つ「div1」と「div2」という名前の 2 つの異なる div があります...

$('#link1').click(function() {
    $('#div1').show();
    $('$div2').hide();
});

$('#link2').click(function() {
    $('#div2').show();
    $('$div1').hide();
});

それはあなたがやろうとしていることですか？link1 をクリック -> div1 を表示し、div2 を非表示にします。link2 をクリック -> div2 を表示 div1 を非表示?

それがあなたが望んでいたものかどうかはわかりません。そうでない場合は、質問を明確にしてください。

あなたのサイトのコード例で編集してください：これを試してください

$("#about").click(function () {
  $("#aboutdetails").fadeIn("slow", function() {

  });
  $("#contactdetails").hide();
});


$("#contact").click(function () {
$("#contactdetails").fadeIn("slow", function() {

});
$("#aboutdetails").hide();
});

$("#aboutdetails").click(function() {
   $("#aboutdetails").hide();
});
 $("#contactdetails").click(function() {
    $("#contactdetails").hide();
});
于 2012-07-28T01:08:02.640 に答える
1

jsBin デモ

実際には...コンテンツには使用する方がはるかに簡単ですclasses（例：） 、ボタンのみに使用します：.boxID

  <ul id="nav">
    <li id="about">ABOUT</li>
    <li id="contact">CONTACT</li>
  </ul>
  
  <div class="box aboutdetails">
    About details here..........
  </div>
  
  <div class="box contactdetails">
    Contact details here..........
  </div>

必要なのは次のとおりです。

$('#nav li').click(function(){              // any li 'button'
  $('.box').hide();                         // hide opened
  $('.'+this.id+'details').fadeIn(600);     // this.id will take the button's ID
});

このスクリプトが行うことは次のとおりです。

  • 任意のボタンをクリックして、すべてを非表示にします.box
  • クリックしたボタンのID( this.id)を登録し、ボタンのような名前のクラスを持つ要素を検索ID+details

いいね？

于 2012-07-28T01:14:50.757 に答える
0

次を使用して、他のものが表示されているかどうかを確認できます。

$('#blabla').is(':visible')

trueまたはfalseを返します。

于 2012-07-28T01:07:18.873 に答える
0

クリックするとトリガーされるクリックイベントを扱っており、ユーザーがdivをクリックしたときに制御できないため、これは難しい質問ですが、ユーザーがいずれかをクリックすると表示されるように切り替えることができます。他を隠します。

これがそのコードです

$("#about").click(function () {
 $("#aboutdetails").fadeIn("slow", function() {
  $("#contactdetails").hide();
  $("#aboutdetails").click("slow",function () {
   $(this).hide();
 });
 });
});


$("#contact").click(function () {
   $("#contactdetails").fadeIn("slow", function() {
    $("#aboutdetails").hide();
    $("#contactdetails").click("slow",function () {
     $(this).hide();
    });
  });
});
于 2012-07-28T01:11:52.397 に答える