jQuery UI 选项卡活动选项

jQuery UI 选项卡插件是一个方便易用的选项卡解决方案。通过该插件，您可以方便地创建选项卡，并在选项卡之间切换内容。此外，jQuery UI 选项卡插件还提供了一些有用的选项，如禁用、激活和个性化标记等。其中，活动选项是插件的一个重要部分。

什么是活动选项

在一个选项卡集合中，活动选项是当前选中的选项卡。通常，活动选项的标记颜色或样式与其他选项卡不同。通过 jQuery UI 选项卡插件的 API，您可以轻松控制活动选项的外观和行为。

如何设置活动选项

要设置活动选项，您可以使用 jQuery UI 选项卡插件提供的 active 选项。该选项用于指定默认情况下应该处于哪个选项卡处于活动状态。例如：

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

此外，您还可以使用 active 方法来设置或获取当前活动选项的索引：

// 获取当前活动选项的索引
var index = $( "#tabs" ).tabs( "option", "active" );
// 将索引为 2 的选项卡设置为活动选项
$( "#tabs" ).tabs( "option", "active", 2 );

如何自定义活动选项

如果您希望自定义活动选项的外观和行为，您可以指定 active 选项为一个对象。该对象应该具有以下属性：

• active: 必需，指定默认情况下应该处于哪个选项卡处于活动状态。
• classes: 可选，指定每个选项卡在不同状态下应该添加到的 CSS 类名。如果没有指定，jQuery UI 选项卡插件会自动为您处理。

例如：

$( "#tabs" ).tabs({
  active: {
    active: 1,
    classes: {
      "ui-tabs-active": "my-active-class",
      "ui-tabs-panel": "my-panel-class"
    }
  }
});

在上面的例子中，当索引为 1 的选项卡处于活动状态时，它将添加 .my-active-class 类名，并在 .ui-tabs-panel 上添加 .my-panel-class 类名。您可以使用这些类名自定义选项卡的外观。