在jquery中隱藏和顯示div

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

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

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

來源

2013-02-14 Undermine2k

你沒有使用jQuery UI標籤widget嗎？ – j08691 2013-02-14 19:12:42

不，我正在使用不同的自定義菜單。 – Undermine2k 2013-02-14 19:13:18

我建議：

$('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。

參考文獻：

來源

2013-02-14 19:13:43

不錯，不知道nextAll。也像你如何做'ul〜div.hide（）'非常漂亮。謝謝 – Undermine2k 2013-02-14 19:22:20

非常歡迎！很高興有（一些）幫助:) – 2013-02-14 19:22:50

如果你想顯示第一個'div'，而不是隱藏*所有*，你可以使用，而不是：['$（'ul + div〜div' ）']（http://jsfiddle.net/davidThomas/N7whh/3/）。 – 2013-02-14 19:24:23

給選項卡一類

<div id="tab_1 tab">

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

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

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

來源

2013-02-14 19:15:18 aldux

'$（this）.attr（'id'）'給出與'this.id'完全相同的屬性。你認爲哪個更有效率？ – 2013-02-14 19:22:19

在jquery中隱藏和顯示div

回答

相關問題