JQuery переключение вкладок с дополнительной функцией переключения

Question

У меня есть несколько настроек вкладок;вот что они в настоящее время делают:

1. скрытие контента при открытии страницы
2. показ контента при нажатии на вкладку (с переключателем, чтобы пользователь мог показать / скрыть / показать / скрыть контент)
3. активная вкладка меняет цвет при выборе

Проблема: когда пользователь нажимает на одну из вкладок и показывает содержимое, а затем нажимает на другой вкладке, оба набора содержимого показывают(как совокупный переключатель).

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

Вот еще один SO вопрос, который касается чего-то подобного, но он не включает в себя код активного класса, который у меня есть - Работа с несколькими переключателями и JS, который работает - http://jsfiddle.net/jHvjD/5/

JQUERY

$(document).ready(function(){

  $('.tab_contents').hide();

  $('.tab').click(function() {

      $(this.rel).toggle();

  $('#tabs_container > .tabs > li.active')
      .removeClass('active');

  $(this).parent().addClass('active');

  $('#tabs_container > .tab_contents_container > div.tab_contents_active')
      .removeClass('tab_contents_active');

  $(this.rel).addClass('tab_contents_active');
 });
});

HTML

     <div id="tabs_container">

      <!-- These are the tabs -->
      <ul class="tabs">
        <li>
          <a href="#" rel="#tab_1_contents" class="tab">Option 1</a>
        </li>
        <li><a href="#" rel="#tab_2_contents" class="tab">Option 2</a></li>
      </ul>

      <div class="clear"></div>

      <div class="tab_contents_container">

        <!-- Tab 1 Contents -->
        <div id="tab_1_contents" class="tab_contents tab_contents_active">Option 1 stuff        </div>

        <!-- Tab 2 Contents -->
        <div id="tab_2_contents" class="tab_contents">Option 2 stuff</div>
        </div>

Answer 1

$('.tab_contents').hide();

  $('.tab').click(function(){
    var target = $(this.rel);          
    $('.tab_contents').not(target).hide();
    target.toggle();

  $('#tabs_container > .tabs > li.active')
      .removeClass('active');

  $(this).parent().addClass('active');

  $('#tabs_container > .tab_contents_container > div.tab_contents_active')
      .removeClass('tab_contents_active');

  $(this.rel).addClass('tab_contents_active');
 });

скрипка: http://jsfiddle.net/GkGyt/2/

Answer 2

Вы можете попробовать это, что намного проще.

$(document).ready(function(){

  $('.tab_contents').hide();

  $('.tab').click(function() {
      var activeTabContent = $(this).attr('rel');

      $('#tab_contents').not(activeTabContent).hide()
      .removeClass('tab_contents_active');

      $(activeTabContent).toggle().addClass('tab_contents_active');

      $(this).parent().addClass('active').siblings().removeClass('active');
  });
});

Answer 3

сделать $('.tab_contents_active').toggle(); перед удалением класса.таким образом, они сдвинутся вверх, прежде чем новая вкладка соскользнет вниз.

Answer 4

Зачем быть таким сложным - попробуйте сначала просто:

 $('.tab_contents_active')
    .removeClass('tab_contents_active');

вместо

$('#tabs_container > .tab_contents_container > div.tab_contents_active')
    .removeClass('tab_contents_active');

Если это работает (что будет), то вы можете оптимизировать.

Я подозреваю, что нет оптимизации первого кода, если ваша страница не очень очень сложна, дополнительные селекторы просто замедлят ее работу ... но это действительно зависит от вашего домена ... попробуйте просто "удалить их все"Решение первое.