jQuery UI tabs中tab的索引
博客专区 > lei.D 的博客 > 博客详情
jQuery UI tabs中tab的索引
lei.D 发表于11个月前
jQuery UI tabs中tab的索引
  • 发表于 11个月前
  • 阅读 8
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 学生专属云服务套餐 10元起购>>>   

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问题彻底解决。

共有 人打赏支持
粉丝 0
博文 3
码字总数 1828
×
lei.D
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: