jQuery有機標籤

Question

我正在使用有機標籤插件 - http://css-tricks.com/4530-organic-tabs/ - 需要一些幫助。

根據身體標記的類別，我希望在兩個列表之間切換 - 例如，如果用戶正在查看帆船，我希望標籤默認切換到「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. 如果它不匹配，然後切換到顯示正確的列表 - 我想這可以通過添加/刪除當前在面板2上的'hide'類來完成。

有些時候身體根本沒有帆或者力量課，所以在這些情況下，標籤可以正常運行。

任何指向正確方向的指針都會很棒！

修訂*

好了，所以今天被玩弄和我（寫的jQuery固然很笨拙的方式），似乎什麼，我需要它。然而完成大部分。 ..有一些我有點卡住了。如果用戶點擊Sail頁面上的Power選項卡，該選項卡將會切換，但該列表將不會顯示，因爲它被告知隱藏在前一個功能中 - 無論如何，我正在使用該部分參見下面的內容......有任何想法嗎？

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