jquery - トグルをトリガーする単一のdiv

Question

こんにちはすべて私は「スイッチ」をクリックするたびに「＃one」、「＃two」、「＃three」を切り替えるシナリオを作成しようとしています

jqueryを開始する方法がわかりません

<div class="switch">swicth</div>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>

<style>
#one, #two, #three{
    display:none;
}
</style>

Answer 1

これを試して：

$(".switch").toggle(
    function() { hideAll(); $("#one").show(); },
    function() { hideAll(); $("#two").show(); },
    function() { hideAll(); $("#three").show(); }
);

function hideAll() {
    $("#one, #two, #three").hide();
}

フィドルの例

Answer 2

私はクラスセレクターを使用して、そのようなものをいくつでも持つことができるようにしますdiv。

デモ: http://jsfiddle.net/m7gSn/2/

<div class="switch">swicth</div>
<div id="one" class="myc">1</div>
<div id="two" class="myc">2</div>
<div id="three" class="myc">3</div>  
<style> .myc { display:none; } </style>

JS:

var $myc= $('.myc');
var cp = 0;

$('.switch').click (function () {       
   $myc.hide().eq(cp++).show();       
   if (cp == $myc.length) cp = 0;        
});

Answer 3

ちょっとした魔法:

$('.switch').click(function() {
    var c = $.data(this, 'index', ($(this).data('index') || 1) % 3 + 1);
    $('div').hide().eq(c-2).show();
});

デモ: https://tinker.io/0d614

Answer 4

私はこれを思いつきました。toggle回転させたいdivにクラスを追加した後：

$(".switch").click(function() {
    var toggle = $(".toggle:visible");
    if (toggle[0]) {
       $(toggle[0]).hide();
       var next = $(toggle[0]).next(".toggle");
       if (next[0]) {
         $(next[0]).show();   
       }
       else {
         $(".toggle").first().show();
       }
    }
    else {
        $(".toggle").first().show();
    }        
});

デモ