Question

我正在使用有机标签插件 - http://css-tricks.com/4530-organic-tabs/ - 需要一些帮助。

根据body标签上的类，我希望在两个列表之间切换 - 例如，如果用户正在查看帆船，我希望标签在默认情况下切换到'panel2'。 / p>

同样，如果他们正在看动力船，那么我希望标签默认位于'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需要......

找到身上的课 - 帆或力量
查找当前列表并查看正在显示的列表 - panel1或panel2
检查当前列表是否与正文上的类匹配
如果匹配，什么都不做？
如果它不匹配，那么切换到显示正确的列表 - 我想这可以通过添加/删除当前在面板2上的“隐藏”类来完成吗？

有时候身体根本没有风帆或动力等级，所以在这种情况下，标签可以正常运作。

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

的 已更新的 *

好的，所以今天一直在玩，我的（不可否认的是非常笨拙的编写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');
  }
});

jQuery有机标签

1 个答案: