Question

我正在使用jQuery Tools的标签插件来执行垂直标签系统（标签垂直堆放在左侧，相关内容位于右侧）。

单击选项卡时，右侧的内容会发生变化。工作正常。

有没有办法让当前/活动标签始终是列表中的第一个（或顶部）标签？

<div class="corpRespPod" id="notes">
        <ul class="tabs">
            <li><a href="#notes" title="Tab 1">Tab 1</a></li>
            <li><a href="#notes" title="Tab 2">Tab 2</a></li>
            <li><a href="#notes" title="Tab 3">Tab 3</a></li>
        </ul>
        <div class="panes">
            <div>
               Tab 1 content Here
            </div>
            ...
        </div>
</div>

简单的JS来解雇它：

    $("#notes .tabs").tabs("#notes .panes div");

换句话说，如果单击“Tab 2”，它显然会添加当前类，但也会使其成为列表中的第一个<li>。任何CSS或JS解决方案的想法？似乎不在本机jQuery Tools功能中。

Answer 1

对jQuery Tools不太确定，但jQuery UI似乎非常直接

使用jQuery UI检查此演示，它可能会有帮助。

Vertical Tabs jQuery

Answer 2

<div class="corpRespPod" id="notes">
   <ul >
    <li class="tabs" id="firstTab"></li>
    <li class="tabs">Tab 1</li>
    <li class="tabs">Tab 2</li>
    <li class="tabs">Tab 3</li>
  </ul>
</div>

jQuery(document).ready(function (){
    $("#notes .tabs").tabs("#notes");
});

$(".tabs").click(function(){
    $("#firstTab").text($(this).text());
    $(this).hide();
    $(".tabs").not(this).show();
});

这是你选择的标签永远是第一个。并且您的DOM中总会有3个选项卡。

编辑：我已经用我的小提琴（http://jsfiddle.net/8pkXW/28/）同步了上面的代码。现在插上并检查

Answer 3

我希望use jQuery删除DOM节点并将其再次插入选项卡列表的前面。你可以通过调用jQuery的slideUp和/或slideDown方法（或another animation method）并依靠回调来命令动画来使它看起来很好。 jQuery的效果内置了回调。

Answer 4

你当前的css是什么？当我意外地提出一个立场时，我也发生了同样的事情：绝对是当前的。

jQuery工具选项卡插件：使活动选项卡始终优先

4 个答案: