jQuery UI tabs中tab的索引

最新推荐文章于 2023-05-16 08:38:11 发布

chutou9033

最新推荐文章于 2023-05-16 08:38:11 发布

阅读量216

点赞数

文章标签： javascript ui ViewUI

原文链接：https://my.oschina.net/u/724543/blog/801784

版权

1. 前言

最近在项目中使用了jQuery UI tab组件。其中遇到两个问题，解决之后，小记一下。

A. 选中标签页

B. 获得标签页的索引

2.环境说明

jQuery-1.8

jQuery-ui-1.12.0

3.关于选中标签页

直接百度获得的结果往往是这样的

var tabs = $("#tabs").tabs();

tabs.tabs("select",$index); // 其中$index是要激活的tab-panel的索引

tabs.tabs("select",$selector); // 其中$selector是要激活的tab-panel的id选择器表达式

试了一下不能用，是版本问题。这种写法是jQuery-ui 1.9之前的，jQuery-1.12的写法是这样的

var tabs = $("#tabs").tabs();

tabs.tabs("option","active",$index); // 其中$index是要激活的tab-panel的索引

// 此外经过试验，将$index替换为$selector是不行的

到此，A问题搞定。但是又引出了问题B，索引该如何获得呢?

4.关于获得标签页索引

jQuery-1.12 API提供的方法中，无法获得当前tabs组件有多少个tab，每个tab的索引又是多少。仔细阅读了API文档之后，我将目光投向了instance方法。如下所示：

var widget =  tabs.tabs("instance"); // 得到tab组件的实例

widget.tabs // 得到tab组件的所有tab,似乎还是1个jQuery对象经过尝试，如下代码如愿得到了索引

/**
其中$tab-panel-id是要激活的tab-panel的id。通常在生成新的标签页时，其tab-title和tab-panel的对应关系是明确的
*/
widget.tabs.index($("a[href='#$tab-panel-id']").parent('li'));

至此，B问题搞定，A问题彻底解决。

转载于:https://my.oschina.net/u/724543/blog/801784