1

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

4

4 回答 4

1

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

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

垂直标签 jQuery

于 2012-05-30T16:15:35.773 回答
1

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

于 2012-05-30T20:23:47.787 回答
1 
<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/）同步了上面的代码。现在插入并检查它

于 2012-05-30T16:19:02.870 回答
0

你在 li.current 上的 CSS 是什么？当我不小心在 li.current 上放置了一个 position:absolute 时，我也发生了同样的事情。

于 2012-06-14T18:20:20.877 回答