jQuery 工具选项卡插件：使活动选项卡始终放在首位答案

【问题标题】：jQuery Tools Tab Plugin: Make Active Tab Always firstjQuery 工具选项卡插件：使活动选项卡始终放在首位
【发布时间】：2012-05-30 16:03:19
【问题描述】：

我正在使用 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 工具功能中。

【问题讨论】：

您能否更具体地说明您的问题是什么？你已经想过做什么？
我的问题是如何让 .tabs 中的“活动”<li> 始终位于无序列表中的首位/首位。正在考虑某种定位，但似乎有些矫枉过正。

标签： jquery css jquery-tools

【解决方案1】：

对 jQuery 工具不太确定，但使用 jQuery UI 似乎非常简单

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

Vertical Tabs jQuery

【讨论】：

通过 jQuery 工具，我已经开始使用您的链接。我遇到的问题是让当前的总是移动到导航的顶部（或第一个）。
这就是我推荐jquery ui的原因，因为它不会改变你的li标签的顺序

【解决方案2】：

我会use jQuery 删除 DOM 节点并将其再次插入选项卡列表的前面。您可以通过调用jQuery 的slideUp 和/或slideDown 方法（或another animation method）并依靠回调对动画进行排序来使它看起来不错。 jQuery 的效果内置于回调中。

【讨论】：

这听起来很有希望，我将按照这些思路制定解决方案。

【解决方案3】：

<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/）同步了上面的代码。现在插入并检查它

【讨论】：

然后我用 CSS 来定位它们？
没有。当您单击一个选项卡时，它的
将被删除，并且其所有内容将传递给您的辅助
，它始终位于第一个位置。因此，您选择的选项卡将始终显示在第一个位置。

嗯，肯定看到它在你的 jsfiddle 中正常工作，但是当我将它集成到我的代码中时，点击时，它会使选项卡全部消失，只留下所选选项卡的关联内容区域。