jQuery Organic Tabs

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를 배우고 있으며 이에 대한 가장 좋은 접근 방법은 확실하지 않으므로 팁이 유용 할 것입니다. 현재 목록을 찾아 항해 또는 전원

및 표시되는 목록 참조 - -에 Panel1 또는 panel2

내가 생각하고 방법은

1. 몸에 클래스를 찾기 ... jQuery를가 필요하다는 것입니다 현재 목록이 본문의 클래스와 일치하는지 확인하십시오.
2. 일치하는 경우 아무것도하지 마십시오.
3. 일치하지 않는 경우 올바른 목록을 표시하도록 전환하십시오. 현재 패널 2에있는 'hide'클래스를 추가/제거하면됩니다.

시체가 돛 또는 전원 클래스를 전혀 가지지 않을 때가 있기 때문에 이러한 상황에서는 탭이 정상적으로 작동 할 수 있습니다.

올바른 방향으로 어떤 포인터가 좋을 것입니다!

업데이트]*

좋아, 그래서 오늘은 장난 내 (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'); 
    } 
});