如何在 jQuery UI 中设置活动选项卡 - JavaScript

许多 Web 应用程序都使用标签页来组织内容。选项卡被广泛使用，并提供了一种方便的方法来显示和管理多个相关信息。在 jQuery UI 中，选项卡是一个非常流行的组件。在本文中，我们将介绍如何在 jQuery UI 中设置活动选项卡。

HTML 结构

要使用 jQuery UI Tabs 组件，需要使用以下 HTML 结构：

<div id="my-tabs">
    <ul>
        <li><a href="#tab-1">标签1</a></li>
        <li><a href="#tab-2">标签2</a></li>
        <li><a href="#tab-3">标签3</a></li>
    </ul>
    <div id="tab-1">
        <p>这是标签1的内容。</p>
    </div>
    <div id="tab-2">
        <p>这是标签2的内容。</p>
    </div>
    <div id="tab-3">
        <p>这是标签3的内容。</p>
    </div>
</div>

其中，<ul> 列出了每个选项卡的标题，并使用 <a> 标记作为选项卡的标签页。每个选项卡的内容放置在一个对应的 <div> 元素内。

初始化 Tabs

要使用 jQuery UI Tabs，需要先将其初始化。可以使用以下 JavaScript 代码：

$(function() {
    $("#my-tabs").tabs();
});

在这里，我们使用 tabs() 函数将选项卡组件应用于 #my-tabs 元素。此函数的选项可以用于自定义该组件的各个方面。

设置活动选项卡

要设置活动选项卡，可以使用 active 选项。例如，以下代码将在初始化时将第二个选项卡设为活动选项卡：

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

在这里，我们在 tabs() 函数中传入一个选项对象，其中包含一个 active 属性来指定活动选项卡的索引。在这种情况下，我们将其设置为 1，这意味着第二个选项卡将成为活动选项卡。

总结

在本文中，我们介绍了在 jQuery UI 中设置活动选项卡的方法。通过使用 active 选项，您可以轻松地指定默认活动选项卡。对于更多信息，请参见 jQuery UI Tabs 文档。