Twitter 引导选项卡是一种常见的网站功能，它允许用户在单个页面上访问多个相关页面。用户可以通过点击选项卡来切换不同的页面内容。在本文中，我们将深入介绍如何使用 HTML、CSS 和 JavaScript 来创建 Twitter 引导选项卡。
HTML 结构
首先，我们需要为每个选项卡创建一个按钮。我们可以使用 <ul> 元素和 <li> 元素来创建选项卡的列表，并在每个 <li> 元素中添加一个 <button> 元素作为选项卡按钮。每个按钮需要一个唯一的 ID，以便我们可以在 JavaScript 中引用它。
<ul class="tabs"> <li><button id="tab1">选项卡 1</button></li> <li><button id="tab2">选项卡 2</button></li> <li><button id="tab3">选项卡 3</button></li> </ul>
接下来，我们需要为每个选项卡创建一个对应的容器 <div> 元素。这些容器将用于显示每个选项卡的内容。每个容器也需要一个唯一的 ID，以便我们可以在 JavaScript 中引用它。
-- -------------------- ---- ------- ---- ------------- ---------------- ---- --- - --- --- ------ ---- ------------- ---------------- ---- --- - --- --- ------ ---- ------------- ---------------- ---- --- - --- --- ------
注意，我们还为每个容器添加了一个 class="content" 属性。这是因为我们将使用 CSS 样式来控制选项卡的显示和隐藏。
CSS 样式
我们需要使用 CSS 来控制选项卡的显示和隐藏。通过设置 <div> 元素的 display 属性为 none，可以将其隐藏。然后，当用户点击相应的选项卡按钮时，我们将使用 JavaScript 将选项卡的对应内容区域的 display 属性设置为 block，以显示该选项卡的内容。
.content {
display: none;
}
.content.active {
display: block;
}在上面的样式中，我们首先将 .content 元素的 display 属性设置为 none，以便默认情况下不显示选项卡的内容。然后，我们定义了一个名为 .content.active 的新样式。当我们在 JavaScript 中将某个选项卡标记为“活动状态”时，我们将向其添加 active 类，以显示该选项卡的内容。
JavaScript 代码
最后，我们需要编写 JavaScript 代码来处理选项卡的切换。当用户点击选项卡按钮时，我们需要将选项卡内容区域的 display 属性设置为 block，并将所有其他选项卡的内容区域的 display 属性设置为 none。
-- -------------------- ---- -------
----- ---- - -------------------------------- ---------
----- -------- - --------------------------------------
------------------ -- -
----------------------------- -- -- -
-- --------------
---------------- -- ------------------------------
-- ----------
----- ------- - ------------------------------------------------ --------------
-------------------- -- ------------------------------
--------------------------------
-- ------------
----------------------------
---
---在上面的代码中，我们首先获取所有的选项卡按钮和选项卡内容区域。然后，我们使用 Array.prototype.forEach() 方法遍历每个选项卡按钮，并为其添加一个点击事件监听器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8569