jQueryUI：如何激活一个tab

最新推荐文章于 2024-06-23 23:33:24 发布

Enbandari

最新推荐文章于 2024-06-23 23:33:24 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： jqueryui jquery ui

3 篇文章

订阅专栏

本文介绍如何使用 jQuery UI 的 Tabs 控件并通过代码手动激活指定的 Tab。具体讲解了如何利用 active 选项来实现这一功能，同时分享了一个实际案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery提供了很多比较好用的控件，今天用了一下tab，效果类似于浏览器上面的tab。

这些tab的激活（activate）就是显示该tab的内容并关闭其他tab的内容的过程，默认支持click事件激活tab，当然我们也可以通过设置eventtype来将其事件设置为hover或者其他。

今天有个需求就是通过其他位置的控件的点击来增加一个tab，并且激活该tab，那么如果只是企图简单的修改eventtype显然是不可以的。

翻了一下文档，发现了这个接口：

Default: 0

Which panel is currently open.

Multiple types supported:

Boolean: Setting active to false will collapse all panels. This requires the collapsible option to be true.
Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.

Code examples:

Initialize the tabs with the active option specified:

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

// getter
var active = $( ".selector" ).tabs( "option", "active" );
 
// setter
$( ".selector" ).tabs( "option", "active", 1 );

这意思就是说，我们可以通过指定active后面的值来确定那个tab需要被激活。最初因为不熟悉jQuery，连其文档也看得稀里糊涂，找了很久。。另外，我之前把上面的代码写到了

      tabs.tabs("refresh");

之前，导致执行有问题。