jQuery點擊多個按鈕來查看多個內容div

Question

我想教自己jQuery，但碰到了路障。

我們的目標是讓一個div始終顯示在我的網站上，但當點擊特定按鈕時，它會將其更改爲不同的div。

將有多個按鈕與至少兩個不同的內容一起去。我已經想出瞭如何用一個按鈕在兩個div之間切換，但是我遇到了第二個按鈕的問題。

如果主div顯示第一個'Section One'又名原始div，第二個按鈕會將內容更改爲'Section Two的內容。但是，如果某人已經按下了Section One按鈕並顯示了第二個div /選項，那麼如果有人點擊了Section Two按鈕，div內容將不會改變。另外，一旦有人開始了第二部分的最後一個div選項，它就不會回到那個特定按鈕的第一個選項。

我還希望人們在查看第二節後能夠回到Section One內容。

非常感謝您的幫助。

$('#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(); 
 
    } 
 
});

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

Answer 1

在JavaScript中必須添加else供詞，以及以賬戶情況下，當兩個if和else if條件都是假的。

$('#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();; 
 
    } 
 
});

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