JQuery Органические вкладки

Question

Я использую плагин органических вкладок - http://css -tricks.com / 4530-organic-tabs / - и мне нужна помощь.

В зависимости от класса тега body я хочу переключаться между двумя списками - например, если пользователь смотрит на парусную лодку, я бы хотел, чтобы вкладки по умолчанию переключались на 'panel2'.

Аналогичным образом, если они смотрят на моторную лодку, то я бы хотел, чтобы вкладка была по умолчанию на 'panel1'.

HTML-код

<div id="sailOrPower">  
    <ul class="nav">
        <li class="nav-one"><a href="#panel1" class="current">Top Power</a></li>
        <li class="nav-two"><a href="#panel2">Top Sail</a></li>   
    </ul>
    <div class="listWrap">
        <ul id="panel1">
            <li><a href="#">Power boat 1</a></li>
            <li><a href="#">Power boat 1</a></li>  
        </ul>    
        <ul id="panel2" class="hide">
            <li><a href="#">Sail boat 1</a></li>    
            <li><a href="#">Sail boat 1</a></li>    
        </ul>
    </div>
</div>

и функция по умолчанию у меня есть

$(function () {
$("#sailOrPower").organicTabs({
"speed": 0
});
});

Это, очевидно, должно измениться.

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

1. Найди класс по телу - парус или сила
2. Найти текущий список и посмотреть, какой список отображается - panel1 или panel2
3. Проверьте, соответствует ли текущий список классу в теле
4. Если он совпадает, ничего не делать?
5. Если он не совпадает, переключитесь, чтобы отобразить правильный список - я думаю, это можно сделать, добавив / удалив класс 'hide', который в настоящее время находится на панели 2?

Бывают случаи, когда тело вообще не имеет паруса ИЛИ класса мощности, и поэтому в этих обстоятельствах вкладки могут вести себя как обычно.

Все указатели в правильном направлении были бы великолепны!

ОБНОВЛЕНО *

Хорошо, так что сегодня играю, и мой (по общему признанию, очень неуклюжий способ написания jQuery), похоже, делает БОЛЬШЕ того, что мне нужно, ОДНАКО ... есть кое-что, на чем я немного застрял. Если пользователь нажимает на вкладку «Питание», в то время как на странице «Парус» вкладка будет переключаться, НО список не будет отображаться, поскольку ему говорят, что он скрыт в предыдущей функции - во всяком случае, у меня есть эта часть, см. Ниже ... Есть идеи?

$(function() {
    var $body = $('body');

    if ($body.is('.sailPage')) {
        $('#sailOrPower ul.nav li.nav-one a').removeClass('current');
        $('#sailOrPower ul.nav li.nav-two a').addClass('current');
        $('#sailOrPower .listWrap ul#panel1').addClass('hide');
        $('#sailOrPower .listWrap ul#panel2').css('display', 'block');
    }
else if ('#sailOrPower ul.nav li.nav-one a').hasClass('current')  {
    $('#sailOrPower .listWrap ul#panel1').removeClass('hide')
    }
});

Answer 1

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

$(function() {
  if($('.sail').size() > 0) {
    $('#sailOrPower .listWrap ul')
      .removeClass('hide')
      .filter('#panel2')
      .addClass('hide');
  }
  if($('.power').size() > 0) {
    $('#sailOrPower .listWrap ul')
      .removeClass('hide')
      .filter('#panel1')
      .addClass('hide');
  }
});