如何使用 JavaScript 创建水平和垂直选项卡？

选项卡是在网站设计中经常使用的工具，可以让用户轻松地浏览网站的不同部分。这里将介绍如何使用 JavaScript 创建水平和垂直选项卡。

水平选项卡

Markdown 代码片段：

<div class="tab">
  <button class="tablinks active" onclick="openTab(event, 'tab1')">选项卡1</button>
  <button class="tablinks" onclick="openTab(event, 'tab2')">选项卡2</button>
  <button class="tablinks" onclick="openTab(event, 'tab3')">选项卡3</button>
</div>

<div id="tab1" class="tabcontent">
  <h3>选项卡1 内容</h3>
  <p>这是选项卡1 的内容。</p>
</div>

<div id="tab2" class="tabcontent">
  <h3>选项卡2 内容</h3>
  <p>这是选项卡2 的内容。</p>
</div>

<div id="tab3" class="tabcontent">
  <h3>选项卡3 内容</h3>
  <p>这是选项卡3 的内容。</p>
</div>

JavaScript 代码片段：

function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

CSS 代码片段：

/* 设置水平选项卡按钮样式 */
.tab button {
  background-color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 33.33%;
  transition: 0.3s;
}

/* 鼠标悬停选项卡按钮变色 */
.tab button:hover {
  background-color: #ddd;
}

/* 设置默认选项卡按钮样式 */
.tab button.active {
  background-color: #ccc;
}

/* 设置选项卡内容样式 */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  min-height: 200px;
}

解释如下：

• HTML 部分

在 div 标签中添加 button 标签，每个 button 标签代表一个选项卡。将它们设置为类名为 'tablinks'。为每个选项卡创建一个 div 包含内容，并将它们设置为类名为 'tabcontent'。添加一个带有 class 名称为 'tab' 的 div 元素来包含选项卡按钮。

• JavaScript 部分

该函数接受两个参数：事件 evt 和要打开的选项卡名称 tabName。它使用 className 属性添加和删除类名来切换选项卡按钮的样式。它还在选项卡内容之间切换并设置对应的选项卡内容可见。

• CSS 部分

在这个例子中，我们使用类名选择器来设置选项卡按钮和内容的样式。我们还使用:nth-child (n)选择器将选项卡按钮平均布局为三列。

垂直选项卡

Markdown 代码片段：

<div class="vertical-tab">
  <button class="vertical-tablinks active" onclick="openTab(event, 'tab4')">选项卡4</button>
  <button class="vertical-tablinks" onclick="openTab(event, 'tab5')">选项卡5</button>
  <button class="vertical-tablinks" onclick="openTab(event, 'tab6')">选项卡6</button>
</div>

<div id="tab4" class="vertical-tabcontent">
  <h3>选项卡4 内容</h3>
  <p>这是选项卡4 的内容。</p>
</div>

<div id="tab5" class="vertical-tabcontent">
  <h3>选项卡5 内容</h3>
  <p>这是选项卡5 的内容。</p>
</div>

<div id="tab6" class="vertical-tabcontent">
  <h3>选项卡6 内容</h3>
  <p>这是选项卡6 的内容。</p>
</div>

JavaScript 代码片段：

function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("vertical-tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("vertical-tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

CSS 代码片段：

/* 设置垂直选项卡按钮样式 */
.vertical-tab button {
  background-color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 100%;
  transition: 0.3s;
  text-align: left;
}

/* 鼠标悬停选项卡按钮变色 */
.vertical-tab button:hover {
  background-color: #ddd;
}

/* 设置默认选项卡按钮样式 */
.vertical-tab button.active {
  background-color: #ccc;
}

/* 设置垂直选项卡内容样式 */
.vertical-tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  min-height: 200px;
}

解释如下：

• HTML 部分

在这个例子中，我们使用不同的类名和样式来设置垂直选项卡。选项卡按钮使用一个按钮列表来包含。我们将它们设置为类名为 'vertical-tablinks'。为每个选项卡创建一个 div 包含内容。并将它们设置为类名为 'vertical-tabcontent'。

• JavaScript 部分

这个函数与水平选项卡函数非常相似，但是使用垂直选项卡的类名。

• CSS 部分

我们使用类名选择器来设置垂直选项卡按钮和内容的样式。我们还设置选项卡按钮宽度为100%并将文本排列到左侧。