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