Скрыть / Показать вкладки (и соответствующий контент) с флажками

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. У меня не может быть никаких вкладок, мне нужно иметь хотя бы одну 'по умолчанию«tab», поэтому для первого я добавил «отключено», поэтому первая вкладка не может быть скрыта. Этот вопрос решен.

2. Что происходит, если пользователь скрывает активную вкладку?Что ж, мое решение, если это произойдет, - сделать вкладку по умолчанию активной. Есть идеи, как «восстановить» выбранный класс на вкладку по умолчанию, если уже выделенная вкладка скрыта?

Еще раз спасибо.

Answer 1

Я думаю, что вкладки пользовательского интерфейса JQuery позволят выполнить то, что вы пытаетесь сделать.

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

Answer 2

Если вы используете вкладки 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>

Примечание: Я инициализировал все ваши флажки как «флажок» и присвоил каждому флажку значение, соответствующее идентификатору вкладки. Я также добавил класс tab-check к каждому входу, чтобы я мог добавить обработчик событий для каждого флажка.

Учитывая тот HTML, вы могли бы написать JS так:

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

Который скрывает / показывает вкладку и содержимое в зависимости от состояния флажка.

См. Рабочий пример здесь: http://jsfiddle.net/andrewwhitaker/uy7AG/

Answer 3

На основе вашей разметки вы можете сделать что-то вроде этого. См. Живой пример (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 4

Если вы добавите value к каждому флажку с идентификатором вкладки, он должен контролировать:

<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, если вы не хотите создавать свои собственные.

---

Редактировать: чтобы ответить на вопрос @ Рикардо в комментариях ниже, я добавил условное переключение на вкладку по умолчанию, если пользователь снимает отметку с выбранной в данный момент вкладки.Непроверенные.

Answer 5

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