Question

我正在尝试自学jQuery，但遇到了障碍。

目标是在我的网站上显示一个div，但在单击特定按钮时将其更改为不同的div。

将有多个按钮，其中至少有两个不同的内容。我已经想出如何用一个按钮在两个div之间切换，但我在第二个按钮时遇到问题。

如果主要div显示第一个＆＃39;第一部分＆＃39;又名原始div第二个按钮会将内容更改为第二部分的内容。但是，如果某人已按下第一部分按钮并显示第二个div /选项，则如果有人点击第二部分按钮，div内容将不会改变。此外，一旦有人进入第二部分的最后一个div选项，它将不会返回到该特定按钮的第一个选项。

我也希望人们在看完第二部分后能够回到第一部分的内容。

提前感谢您的帮助。

＆＃13;

$('#btnClick').on('click',function(){
 if($('#1').css('display')!='none'){
    $('#2').html($('#2').html()).show().siblings('div').hide();
    }else if($('#2').css('display')!='none'){
        $('#1').show().siblings('div').hide();
    }
});
$('#btnClick2').on('click',function(){
 if($('#1').css('display')!='none'){
    $('#3').html($('#3').html()).show().siblings('div').hide();
    }else if($('#3').css('display')!='none'){
        $('#4').show().siblings('div').hide();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">
<p>Section one. Message one.</p>
</div>

<div id="2" style="display:none;">
<p>Section one. Message two.</p>
</div>

<div id="3" style="display:none;">
<p>Section two. Message one.</p>
</div>

<div id="4" style="display:none;">
<p>Section two. Message two.</p>
</div>
<button id="btnClick">Section one</button>
<button id="btnClick2">Section two</button>

＆＃13;

Answer 1

在JavaScript中，您还必须添加else语句，以便考虑if和else if条件均为假的情况。

＆＃13;

$('#btnClick').on('click',function(){
 if($('#1').css('display') != 'none'){
$('#2').show().siblings('div').hide();
 } else if ($('#2').css('display')!='none'){
$('#1').show().siblings('div').hide();
 } else {
$('#1').show().siblings('div').hide();
 }
});

$('#btnClick2').on('click',function(){
  if($('#3').css('display')!='none'){
$('#4').show().siblings('div').hide();
  }else if($('#4').css('display')!='none'){
$('#3').show().siblings('div').hide();
  } else {
 $('#3').show().siblings('div').hide();;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">
<p>Section one. Message one.</p>
</div>

<div id="2" style="display:none;">
<p>Section one. Message two.</p>
</div>

<div id="3" style="display:none;">
<p>Section two. Message one.</p>
</div>

<div id="4" style="display:none;">
<p>Section two. Message two.</p>
</div>
<button id="btnClick">Section one</button>
<button id="btnClick2">Section two</button>

＆＃13;

jQuery单击多个按钮以查看多个内容div

1 个答案: