预选选项卡的打开页面不是第一个选项卡

Posted 2023-02-24

【中文标题】预选选项卡的打开页面不是第一个选项卡

【英文标题】：Opening page with tab preselected that's not the first tab

【发布时间】：2010-10-30 06:27:26

【问题描述】：

我有一个带有 jqueryui 标签集的页面。我希望能够打开带有第一个选项卡以外的选项卡的页面。如果页面上有四个选项卡，我需要能够选择四个选项卡中的任何一个作为“打开”选项卡。

这可能是来自另一个页面的链接或来自同一框架集中的页面的链接。

幕后一切都是 php。

【参考方案1】：

您需要通过 javascript 在页面初始加载时选择一个选项卡。以下是如何选择选项卡的示例：

http://docs.jquery.com/UI/API/1.7/Tabs#method-select

<script type="text/javascript">
  $(function() 
    $("#tabs").tabs( 'select' , index )
  );
</script>

其中索引变量是您要选择的选项卡的整数。它基于 0，因此如果要选择第三个选项卡，则需要为索引指定 2。

页面准备就绪后，您需要执行此操作：

http://www.learningjquery.com/2006/09/introducing-document-ready

【讨论】：

太棒了。感谢您的回答并感谢您提供额外的资源。

这是一种在选项卡已经初始化时选择所需选项卡的方法。如果您想在标签创建步骤中选择某个标签，您应该使用 Simen Echholt 的第二个答案

【参考方案2】：

以上答案对于当前版本的 jQuery UI v1.10.0 不再有效。根据 jQuery UI API，该选项现在是 active 而不再是 select。

这里是 API 的链接：http://api.jqueryui.com/tabs/#option-active

使用指定的活动选项初始化选项卡：

$(".selector").tabs( active: 1 );

【参考方案3】：

预在初始化选项卡时可以使用selected 选项来选择选项卡。

$("#tabs").tabs(
    selected: index //index of the tab to be preselected
);

这很重要的一种情况是索引 0 处的选项卡加载了 ajax。如果您像往常一样初始化选项卡，然后使用select 方法更改选定的选项卡，最初将发送一个ajax 请求来加载选项卡0。但是由于您想立即显示另一个选项卡，所以这个请求是不必要的。 selected 选项允许您跳过此请求。

【参考方案4】：

只需将ui-tabs-selected 类添加到预期的<li> 元素即可。

jQuery 将通过以下路径选择要激活的选项卡

是selected选项设置 如果未设置，location.hash 是否与<a> 标签中的任何标签的hash 匹配 如果没有匹配的哈希值，任何<li> 元素是否有ui-tabs-selected 类 如果不尝试选择第一个未禁用 (ui-state-disabled) 选项卡

有点老问题。已回答，因为此页面是 google 上的第一个页面

【讨论】：

使用当前的 jQuery UI，类现在是 ui-tabs-active 而不再是 ui-tabs-selected。