Question

希望有人可以提供帮助。

我正在通过有机标签插件显示两个船只，帆或电源列表的网站。

现在，我们的客户希望我们默认显示一个列表类型，具体取决于正文标记的类别 - 例如，如果用户在帆船页面上，则正文将有一个'sailPage'类，因此默认情况下显示的列表将是“航行列表” - 反之亦然（虽然默认情况下这是首先显示的，因为它是HTML中的第一个'面板'）

我之前已经问过这个问题，但是我给出的解决方案没有用，所以，以我公认的相当笨拙的方式，我编写了以下jQuery函数，它确实有效 - 但是当用户点击回来时在“power”选项卡上，在页面上有一个“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>

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

有机选项卡 - 根据班级的正文更改当前列表

0 个答案: