使用复选框隐藏/显示选项卡（及其相应的内容） [英] Hide/Display tabs (and its corresponding content) with check boxes

问题描述

嗯，这对大多数人来说很简单，但我不知道如何完成这个。

Well, this must be very simple to do for most of you, but I have no idea how to accomplish this.

我有一组标签，标签的顶部是一组复选框;每个复选框对应一个标签。

I have a set of tabs and on top of the tabs is a set of checkboxes ; each checkbox 'corresponds' to a tab.

我需要的是能够激活/禁用每个复选框，并有相应的选项卡（和选项卡的内容）隐藏/

What I need is to be able to activate/deactivate each checkbox and have its corresponding tab (and the tab's content) hide/display.

这是我的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>

非常感谢任何帮助。

EDIT

很抱歉，我应该为我的标签添加脚本FYI，

I apologize, I should've added the script for my tabs, FYI, I'm not using jQuery UI Tabs:

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

更多信息：

真的想想用户的情况/情况，所以这里有两个：

I didn't really think about the user cases/situations, so here are two:

1. 我不能没有标签，有至少一个默认选项卡，因此我添加了禁用到第一个复选框，因此第一个选项卡不能被隐藏。

用户隐藏了有效的标签页会发生什么？好吧，我的解决方案，如果这种情况，将使默认选项卡，活动。 如果已隐藏已选择的标签，如何隐藏默认标签，如何将已选择的类恢复为已选择？

What happens is the user hides a tab that's active? Well, my solution, if this happens, would be to make the the default tab, active. Any idea how to 'restore' the class 'selected' to the default tab if a an already selected tab is hidden?

再次感谢。

推荐答案

如果添加 code>到每个复选框，它应该控制的标签的id：

If you add a value to each checkbox with the id of the tab it should control:

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

...那么你可以这样做：

...then you can do this:

$(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的问题，如果用户取消选中当前选中的选项卡，我添加了一个条件切换到默认选项卡。未测试。

You might also be interested in the jQuery-UI tabs functionality if you don't want to roll your own.

---

To address @Ricardo's question in the comments below, I added a conditional to switch to the default tab if the user is unchecking the currently selected tab. Untested.

这篇关于使用复选框隐藏/显示选项卡（及其相应的内容）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！