JavaScript切换div

Question

我想在3个div之间切换。不幸的是，它仅适用于2个div。

我的代码（两个div）：

$(function() {
  $('#playerbargreen').hide();
  $('#playerbaroff,#playerbargreen').click(function() {
    $('#playerbargreen,#playerbaroff').toggle();
  });
});

最终结果必须是：

  

显示第一个div - ＆gt;点击 - ＆gt;隐藏第一个div并显示第二个div - ＆gt;点击 - ＆gt;隐藏第二个div并显示第三个div

有人知道吗？提前谢谢！

Answer 1

从Div 2＆amp;开始Div 3隐藏。

为Div 1创建一个点击事件，隐藏Div 1并显示Div 2。

重复Div 2到Div 3.

如下所示的简单内容就足够了：

$('#Div1').click(function() {
    $('#Div1').hide();
    $('#Div2').show();
});

$('#Div2').click(function() {
    $('#Div2').hide();
    $('#Div3').show();
});

Answer 2

您可以尝试这样的事情

$('#Div2').hide();
$('#Div3').hide();

$('#Div1').click(function() {
    $('#Div1').hide();
    $('#Div2').show();
});

$('#Div2').click(function() {
    $('#Div2').hide();
    $('#Div3').show();
});

div{
width:100px;
height:100px;
background-color:green;
color:white;
text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Div1">div1</div>
<div id="Div2">div2</div>
<div id="Div3">div3</div>