使用 jQuery 工具设置默认选项卡

Question

好的，请确保您了解这是使用 jQuery 工具 (http://jquerytools.org/)，而不是 jQuery UI。

我需要知道是否有办法通过实际的 HTML 代码设置默认选项卡。设置代码如下所示：

jQuery("ul.tabs").tabs("div.panes > div");

HTML 是这样的：

<div class="tabs-container">
<ul class="tabs ">
<li class="w3"><a href="#" class="current">The active tab</a></li>
<li class="w3"><a href="#">Another tab</a></li>
<li class="w3"><a href="#">Third tab</a></li>
</ul>
<div class="panes">
<div style="display: block;">
Content of first tab
</div>
<div style="display: none;">
Second tab contents
</div>
<div style="display: none;">
Third tab contents
</div>
</div>

我已经尝试为第二个标签的锚点赋予“当前”类，但没有成功。

Answer 1

在页面上的脚本中设置选项卡时，您需要使用 initialIndex 属性作为第二个参数的一部分。

这是一个指向初始索引设置为“1”的小提琴的链接，默认情况下显示第二个选项卡而不是第一个选项卡，因为选项卡索引从零开始。 http://jsfiddle.net/switchweb/pPMRX/

使用 initialIndex 属性设置它的脚本如下（您可以在此处将“1”替换为最初显示页面时想要成为“当前”的 TAB 的编号，其中第一个选项卡为 0 ，第二个是 1，等等）。

    $("<tabs_selector>").tabs("<pane_selector>",  {initialIndex: 1} );

Answer 2

选项卡初始化后，您可以获取选项卡脚本 API 句柄，然后选择选项卡：

var api = $("ul.tabs").data("tabs");
api.click(1);

完整的参考在“脚本 API”下：http://jquerytools.org/documentation/tabs/