jquery - 使用复选框隐藏/显示选项卡(及其相应的内容)

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. 如果用户隐藏事件的选项卡会发生什么？好吧，如果发生这种情况，我的解决方案是激活默认选项卡。 如果隐藏了已选择的选项卡，您知道如何将“选定”类“恢复”到默认选项卡吗？

再次感谢。

Answer 1

我认为 JQuery UI 选项卡可以完成您想要做的事情。

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