文档章节

jQuery UI tabs中tab的索引

l
 lei.D
发布于 2016/12/07 22:41
字数 386
阅读 10
收藏 0

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

© 著作权归作者所有

共有 人打赏支持
上一篇: Pushlet的那些坑
l
粉丝 0
博文 3
码字总数 1828
作品 0
郑州
私信 提问
30 个实用的 jQuery 选项卡/导航教程推荐

很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果。本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助。 1. Animated Tabbed Conte...

小编辑
2011/11/18
5K
5
[笔记]jQuery UI的tabs组件在IE浏览器中的缓存问题~

jQuery中禁用缓存 最近在使用jQuery ui中的tabs插件时,遇到一个问题。 在非IE浏览器下,标签是自动刷新的。就是在不同的标签间切换,不用刷新整个页面,如果某个标签内容有更新,比如显示时...

leeoo
2011/12/24
0
0
15 个 jQuery 的 Tabs 窗体插件

在网站开发中, Tabs 组件常用于导航菜单、不同类别内容的切换等等功能上,oschina 收录了一些不错的 Tabs 插件,此外再推荐 15 款 jQuery 的 Tabs 插件。 1) Sweet Ajax Tab 2) Slilck Tabb...

红薯
2011/08/29
24.4K
2
20 个最棒的 jQuery Tab 插件

jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件。 Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 jQuery 插件,可以创建基于 Tab 的内容滑...

oschina
2015/01/03
29.6K
8
tabs如何从后台调用呢

jQuery UI Tabs - Content via Ajax Preloaded Tab 1 //这里的href访问的是一个页面,如果是一个servlet该如何修改呢 //还是就是第一个菜单出来的时候,如何加载后面访问的数据呢, Tab 2 Ta...

然K
2012/02/16
218
0

没有更多内容

加载失败,请刷新页面

加载更多

 SQL与NoSQL数据库入门基础知识详解

这几年的大数据热潮带动了一激活了一大批hadoop学习爱好者。有自学hadoop的,有报名培训班学习的。所有接触过hadoop的人都知道,单独搭建hadoop里每个组建都需要运行环境、修改配置文件测试等...

左手的倒影
10分钟前
3
0
Jenkinsfile

node { wrap([$class: 'BuildUser']) { def user = env.BUILD_USER_ID println user }}def InPutCheckBranch(){ timeout(time:10, unit:'SECONDS') { I......

whhbb
15分钟前
0
0
如何去设计前端框架能力?星巴克消息开放项目从0到1,从点到面的思考

本文由淘宝前端工程师罗嗣分享,主要讲述了作者在星巴克消息开放项目中的总结和思考,希望对大家有帮助,让业务分享更加有价值。 摘要 从满足星巴克项目需求单点出发,发散到从点到面的思考。...

阿里云官方博客
20分钟前
0
0
如何在多Kubernetes集群和多租户环境中使用Prometheus监控

过去十年里,我一直在虚拟化和云计算领域工作,在VMware、Mercury Interactive和Oracle领导产品管理工作,并格外关注DevOps方向。直到2014年,我开始认真关注并研究容器。当2015年Kubernete...

RancherLabs
21分钟前
0
0
如何在Chrome浏览器中启动deviceready事件(尝试调试phonegap项目)?

我正在开发PhoneGap应用程序,我希望能够在Chrome中调试它,而不是在电话上调试。但是,我在onGetReady()函数中初始化我的代码,该函数在PhoneGap触发“deviceready”事件时触发。由于Chr...

kisshua
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部