在jquery中隱藏和顯示div

Question

我有一個菜單，當我點擊一個選項卡時，我想隱藏當前顯示在我的查看器中的任何內容，並顯示對應於我點擊的選項卡（對於所有選項卡）的內容。

<div id="main_view"> 
    <ul> 
     <li id="tab_1">tab 1 </li> 
     <li id="tab_2">tab 2 </li> 
     <li id="tab_3">tab 3 </li> 
    </ul> 
    <div id="tab_1_content"> </div> 
    <div id="tab_2_content"> </div> 
    <div id="tab_3_content"> </div> 
</div> 

，但我不希望這樣做，

//tab, 2 and 3 content starts as hidden: 
$('#tab_2_content').hide(); 
$('#tab_3_content').hide(); 

$('#tab_2').click(function,() { 
    $('#tab_2_content').show(); 
    $('#tab_1_content').hide(); 
    $('#tab_3_content').hide(); 
}); 

什麼是實現這一目標的最有效方法是什麼？

Answer 1

我建議：

$('li[id^="tab_"]').click(function(){ 
    $('div[id^="tab_"]').hide(); 
    $('#' + this.id + '_content').show(); 
}); 

JS Fiddle demo。

或者：

$('li').click(function(){ 
    $(this).closest('ul').nextAll('div').hide().eq($(this).index()).show(); 
}); 

JS Fiddle demo。

參考文獻：

• click()。
• eq()。
• hide()。
• index()。
• nextAll()。
• closest()。
• show()。

Answer 2

給選項卡一類

<div id="tab_1 tab"> 

然後，你可以做$（ 「li.tab」）。隱藏（），它會隱藏與標籤類的所有選項卡。然後：

$($(this).attr("id") + "_content").show(); 

那麼，你明白了。只需填寫空白。