Javascript 有机选项卡-根据类的主体更改当前列表

希望有人能帮忙

我在一个网站上工作，通过有机标签插件，我们可以显示两个船只列表，一个是帆船，一个是动力

现在，我们的客户希望我们根据body标签的类别默认显示一种列表类型——例如，如果用户在帆船页面上，那么body将有一个“sailPage”类别，因此默认显示的列表将是“sail list”，反之亦然（尽管默认情况下，这是HTML'中的第一个'面板'，但它始终显示第一个）

我以前问过这个问题，但我得到的解决方案不起作用，因此，以我公认的相当笨拙的方式，我编写了以下jQuery函数，它似乎确实起作用-但是，当用户在带有“sail”类的页面上单击“电源”选项卡时，电源列表不会显示。这似乎也有问题在IE7中，只有先选择另一个选项卡，然后再次选择第二个选项卡，列表的内容才会显示

任何指点都很好——如果有人对如何整理jQuery有任何建议，我们也将不胜感激

<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">
  <h3><strong>Top Boats</strong><br />
    by manufacturer</h3>
  <ul id="panel1">
    <li><a href="#">View full list</a></li>
    <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="#">View full list</a></li>
    <li><a href="#">Sail boat 1</a></li>
    <li><a href="#">Sail boat 1</a></li>
  </ul>
</div>

---

您是否一定要将“#sealpower.listWrap ul#panel2”重置为“display:inline”？您好-谢谢您的评论-您的意思是我需要将其设置为display block吗？如果是，那么它会显示为，否则列表不会显示-如果我使用display inline，那么列表会显示，但ul的背景不会显示

$(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 ($body.is('.sailPage') && $('#sailOrPower ul.nav li.nav-one a').hasClass('.current')) {
    $('#sailOrPower .listWrap ul#panel1').removeClass('hide')
    $('#sailOrPower .listWrap ul#panel1').css('display', 'block')
    }
});