引导选项卡经常用于网站和应用程序中，以帮助用户了解和浏览不同的页面或功能。在本文中，我们将学习如何使用jQuery来激活并操作引导选项卡，使其更加交互和易于使用。
HTML 结构
首先，我们需要设置选项卡的HTML结构。在这个例子中，我们将创建两个选项卡，“Tab 1”和“Tab 2”，并将它们嵌套在一个主容器中：
-- -------------------- ---- -------
---- -------------
--- ------------
------ ---------------- ----------
------ ---------------- ----------
-----
---- --------- --------------------
------- - ------------
------- -- --- ------- --- --- ------
------
---- --------- --------------------
------- - ------------
------- -- --- ------- --- --- ------
------
------在上面的代码中，我们创建了一个包含两个选项卡（Tab 1和Tab 2）的列表，并将每个选项卡的内容嵌套在一个具有唯一ID的DIV中。
CSS 样式
为了使选项卡看起来更加漂亮并且易于使用，我们需要为其添加样式。以下是一个基本的CSS文件，可以用来修饰选项卡：
-- -------------------- ---- ------- ----- - ------- --- ----- ----- -------- ----- - ---- -- - -------- ------------- ------------- ----- - ------------ - -------- ----- - ------------------- - -------- ------ -
上述CSS样式将创建一个包含选项卡列表和内容容器的主容器，并在每个选项卡之间添加一些空白和边框。选项卡列表设置为水平显示，并且每个列表项（即选项卡）之间有一些空白。
选项卡内容使用了一个“隐藏”类来隐藏其自身，但是我们将在后面的步骤中使用jQuery来动态地激活选项卡并显示其内容。
jQuery 动作
现在，我们将使用jQuery来完成引导选项卡的激活和操作。以下代码将自动激活第一个选项卡，并显示其内容：
-- -------------------- ---- -------
---------------------------- -
-- -------- ----- --- -- ---- ----
------- ------------------------------
-------------------------------------------
-- ------ ------ --- --- ------- --- ------- -- -----
------- --------------------- -
--- ----- - --------
--- ----- - -----------------------------
------- ---------------------------
-------------------------
----------------------------------------
----------------------------
---
---以上代码将在文档加载完成后自动激活第一个选项卡，并使用jQuery的click()方法来切换选项卡和显示其内容。
首先，我们选择第一个列表项并为其添加“active”类，以便在页面加载时自动激活该选项卡。然后，我们将使用click()方法来为所有列表项添加单击事件处理程序。
当用户单击选项卡时，该函数首先获取当前选项卡的ID（即其包含链接的href属性），然后使用jQuery来从DOM中删除之前激活的选项卡和内容，并添加“active”类以显示当前选项卡和其内容。
示例
您可以在以下JSFiddle链接中查看上述代码的完整示例： [https://jsfiddle.net/5b9cL1e2/](https://js
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15257