jquery - css jquery 1 つの div を非表示にし、別の div を表示

Question

私は挑戦しています。私は 2 を持っています.1つはページがロードされたときにcssにdivs設定されています.2つの対応するリンクがあります. ユーザーがI would like to show and hideをdisplay:none;クリックすると。そして、ユーザーがI would like to show and hideをクリックすると。link1div1div2link2div2div1

私はこれを機能させることができませんでした！どんな助けでも大歓迎です。S

Answer 1

ここに例があります：

$(function () {
  $(".div1, .div2").hide();

  $(".link1, .link2").bind("click", function () {
    $(".div1, .div2").hide();        

    if ($(this).attr("class") == "link1")
    {
      $(".div1").show();
    }
    else
    {
      $(".div2").show();
    }
  });

});

そして、ここにデモがあります

Answer 2

まず、ここで質問するたびに、質問の HTML を提供してください。

第二に、次のようなことができます..

<script>
$(document).ready(function(){
    $("#div1").hide();
    $("#link1").on("click",function(){
        $("#div1").show();
        $("#div2").hide();
    });
    $("#link2").on("click",function(){
        $("#div2").show();
        $("#div1").hide();
    });
});
</script>

Answer 3

HTML 構造に応じて

このようなものがあれば

​&lt;a href='#'>link1</a>
<a href='#'>link2</a>
<div> div for link 1</div>
<div> div for link 2</div>

jQueryコードは次のようになります

$('a').click(function(e){
    $('div').eq($(this).index()).show();
    $('div').not($('div').eq($(this).index()).hide();
});

http://jsfiddle.net/NXdyb/

Answer 4

あなたはjqueryに夢中ですか？これは、通常の古い JavsScript で簡単に実行できます。

function switchVisible() {

if (document.getElementById['div1'].style.visibility == 'visible') {
    document.getElementById['div1'].style.visibility = 'hidden';
    document.getElementById['div2'].style.visibility = 'visible';
}
else {
    document.getElementById['div1'].style.visibility = 'visible';
    document.getElementById['div2'].style.visibility = 'hidden';
}

}

それからあなたのlink1に持っています：

<a href="/blah" onclick="javascript:switchVisible();">

Answer 5

これは非常に単純な原則です...さまざまな方法で達成できますが、これはほんの一例です。

セレクターは無視してください。私は怠け者です。

HTML ->

<a href="#"> Show Div 1 </a> | <a href="#"> Show Div 2 </a>
<br/><br/>
<div id="div1"> Div 1 </div>
<div id="div2"> Div 2 </div>

CSS ->

#div1{
  display:none;   
}

jQuery ->

$('a:eq(0)').click(function(){
  $('#div1').toggle();
  $('#div2').toggle();    
});
$('a:eq(1)').click(function(){
  $('#div2').toggle();
  $('#div1').toggle();   
});

Answer 6

この例を見てください: http://jsfiddle.net/MUtPy/2/ ^^ Jquery でこれを行うには多くの方法がありますが、この例は確かに開始する必要があります =)