博客

jQuery UI 的 Tabs 组件提供了一个 activate 事件，该事件在 Tab 被激活时触发。在本教程中，我们将详细介绍 Tabs activate 事件的使用方法。

activate 事件基本语法如下：

$( ".selector" ).on( "tabsactivate", function( event, ui ) {
  // Code to be executed when the tab is activated
});

其中，”.selector” 是 Tabs 的 CSS 选择器。

以下两个示例：

示例一：使用 Tabs activate 事件

$( "#my-tabs" ).tabs({
  activate: function( event, ui ) {
    console.log( "Tab activated" );
  }
});

这将创建名为 my-tabs 的 Tabs 实例，并在 activate 事件处理程序中记录一条消息。

示例二：使用 Tabs activate 事件和 on() 方法

$( "#my-tabs" ).tabs();
$( "#my-tabs" ).on( "tabsactivate", function( event, ui ) {
  console.log( "Tab activated: " + ui.newTab.text() );
});

这将创建名为 my-tabs 的 Tabs 实例，并在 activate 事件处理程序中记录一条消息。在消息中，记录新激活的 Tab 的文本。

总结：

jQuery UI 的 Tabs 组件提供了一个 activate 事件，该事件在 Tab 被激活时触发。要使用 activate 事件，需要将其与 Tabs 的 jQuery 对象一起使用。可以使用 activate 选项来设置 activate 事件处理程序，也可以使用 on() 方法来监听 activate 事件。在事件处理程序中，可以执行任何需要在 Tab 被激活时执行的代码。