jQuery有机选项卡

我正在使用“有机标签”插件--需要一些帮助

根据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>

这显然需要改变

我仍在学习jQuery，所以我有点不确定最好的方法是什么，所以任何提示都很好。我想的方法是jQuery需要

在身体上找到职业-帆或动力

找到当前列表并查看正在显示的列表-panel1或panel2

检查当前列表是否与主体上的类匹配

如果匹配，什么也不做

如果不匹配，则切换显示正确的列表-我想这可以通过添加/删除当前在面板2上的类“hide”来完成

有时身体根本就没有帆或动力级，因此在这种情况下，标签可以正常工作

任何指向正确方向的指针都会很棒

更新*

好吧，我今天一直在玩，我（承认我写jQuery的方式非常笨拙）似乎做了我需要的大部分事情，但是。。。有些东西我有点被卡住了。如果用户在Sail页面上单击电源选项卡，该选项卡将切换，但列表不会显示，因为它被告知在上一个功能中被隐藏-无论如何，我对该部分有兴趣，请参见下文。。。有什么想法吗

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

---

这不是一个好的解决方案，因为如果你有很多选项卡，你必须为每个选项卡写这个检查，但是如果你只有两个，这可能是一个快速的解决方案

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

---

抱歉-通过电话添加评论-有点困难。您好，是的，只有两个选项卡，因此理论上您的解决方案可行，但它似乎不可行：（我还需要能够将ul.nav上的“current”类删除/添加到相应的选项卡上（最初忘记了这一点）

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