Question

大家好我想创建一个场景，每次点击'切换'我都会在'＃one'，'＃tw'和'#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();
}

Example fiddle

Answer 2

我会使用类选择器，它允许你有任意数量的div。

DEMO： 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

我想出了这个。将一类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();
    }        
});

Demo

Answer 4

有点神奇：

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

演示：https://tinker.io/0d614

单个div来触发切换

4 个答案: