帶複選框的隱藏/顯示選項卡（及其相應的內容）

Question

好吧，對於大多數人來說，這必須非常簡單，但我不知道如何完成此操作。

我有一組選項卡，並在選項卡頂部是一組複選框;每個複選框'對應'一個選項卡。

我需要的是能夠激活/取消激活每個複選框，並使其相應的選項卡（和選項卡的內容）隱藏/顯示。

這裏是我的HTML：

<div class="show-results-from"> 
    <ul> 
    <li>See results from:</li> 
    <li> 
     <label> 
     <input name="a" type="checkbox" id="a" checked disabled> 
     Products &amp; Services <span>(16)</span></label> 
    </li> 
    <li> 
     <label> 
     <input type="checkbox" name="b" id="b" checked> 
     Publications <span>(9)</span></label> 
    </li> 
    <li> 
     <label> 
     <input type="checkbox" name="c" id="c" checked> 
     Other <span>(150)</span></label> 
    </li> 
    </ul> 
</div> 
<ul class="tabs"> 
    <li><span rel="tabs1" class="defaulttab">Products &amp; Services</span></li> 
    <li><span rel="tabs2">Publications</span></li> 
    <li><span rel="tabs3">Other</span></li> 
</ul> 
<div class="tab-content" id="tabs1">content</div> 
<div class="tab-content" id="tabs2">content</div> 
<div class="tab-content" id="tabs3">content</div> 

任何幫助，這是極大的讚賞。

編輯

我很抱歉，我要通知你，我不使用jQuery UI選項卡添加了腳本我的標籤，：從本教程採取

$(function() { 
    $('.tabs span:first-child').click(function(){ 
     switch_tabs($(this)); 
     return false; 
    }); 
    switch_tabs($('.defaulttab')); 
}); 

function switch_tabs(obj) 
{ 
    $('.tab-content').hide(); 
    $('.tabs span:first-child').removeClass("selected"); 
    var id = obj.attr("rel"); 
    $('#'+id).show(); 
    obj.addClass("selected"); 
} 

腳本：http://justfreetemplates.com/blog/2009/08/31/ultra-simple-jquery-tabs.html

更多信息：

我沒有仔細想想用戶案例/情況，所以這裏有兩個：

1. 我不能沒有標籤，我需要至少有一個「默認」選項卡，所以我增加了「禁用」，以第一個複選框因此第一個選項卡不能被隱藏。 這個解決了。

2. 會發生什麼事是用戶隱藏一個活動的選項卡？那麼，我的解決方案，如果發生這種情況，將使默認選項卡，活躍。 任何想法如果已經選擇的選項卡被隱藏，如何將'selected'類恢復到默認選項卡？

再次感謝。

Answer 1

如果添加value到每個複選框與標籤的ID應該控制：

<input type="checkbox" name="a" id="a" value="tabs1" /> 

...那麼你可以這樣做：

$(document).ready(function(){ 
    $('div.show-results-from').find(':checkbox').click(function(){ 
    if($('ul.tabs li').find('span.selected[rel='+this.value+']').length 
     && !this.checked){ 
     // if user unchecking the "selected" li/tab 
     switch_tabs($('.defaulttab')); // choose default tab 
    } 
    $('#'+this.value).toggle(this.checked); 
    $('ul.tabs li').has('span[rel='+this.value+']').toggle(this.checked); 
    }); 
}); 

如果你願意，你可能也會對jQuery-UI標籤功能感興趣不想推出自己的。

---

編輯：要在下面的評論中解決@ Ricardo的問題，我添加了一個條件來切換到默認選項卡，如果用戶沒有選中當前選中的選項卡。未經測試。

Answer 2

我認爲JQuery UI選項卡可以完成你想要做的事情。

http://jqueryui.com/demos/tabs/

Answer 3

$(document).ready(function(){ 
    $("ul .tabs span").hide(); 
    $("div .tab-content").hide(); 
    $("input[type='checkbox']").click(function(){ 
     switch this.id: 
     { 
     case "a": 
      $("#tab1").toggle(); 
      $("#tabs1").toggle(); 
      break; 
      //write case b and c 
     } 
    });}); 

Answer 4

根據你的標記，你可以做這樣的事情。 See the live example (jsfiddle)。

$('.show-results-from input:checkbox').each(function(i, el){ 
    this.index = i; 
}).change(function(){ 
    var $span = $('ul.tabs li').eq(this.index).find('span'); 
    if(this.checked) 
     $('#' + $span.attr('rel')).show('fast'); 
    else 
     $('#' + $span.attr('rel')).hide('fast'); 
}); 

Answer 5

假設你正在使用jQueryUI的標籤（請張貼鏈接到你是如何創建的標籤），你可以做這樣的事情：

HTML：

<li> 
     <label> 
      <input type="checkbox" name="a" id="a" class="tab-check" value="tabs1" checked='checked'> 
      Products &amp; Services <span>(16)</span></label> 
    </li> 
    <li> 
     <label> 
      <input type="checkbox" name="b" id="b" class="tab-check" value="tabs2" checked='checked'> 
      Publications <span>(9)</span></label> 
    </li> 
    <li> 
     <label> 
      <input type="checkbox" name="c" id="c" class="tab-check" value="tabs3" checked='checked'> 
      Other <span>(150)</span></label> 
    </li> 

注：我已將所有複選框初始化爲「已選中」，併爲每個複選框分配一個與選項卡ID相對應的值。我還爲每個輸入添加了一個類tab-check，所以我可以爲每個複選框添加一個事件處理程序。

鑑於HTML，你可以寫JS是這樣的：

$("input.tab-check").change(function() { 
    $("a[href='#" + this.value + "']").parent().toggle(); 
    $("#" + this.value).toggle(); 
}); 

其中隱藏/顯示取決於複選框的狀態標籤和內容。

看到這裏工作的例子：http://jsfiddle.net/andrewwhitaker/uy7AG/