带复选框的隐藏/显示选项卡（及其相应的内容）

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/