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

📌 相关文章

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

📅 最后修改于: 2023-12-03 14:51:54.858000 🧑 作者: Mango

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

选项卡是网站中常用的一种交互式组件，可以在同一页面中显示多个内容，并且可以通过点击选项卡切换不同的内容。

在本文中，我们将介绍如何使用 JavaScript 创建水平和垂直选项卡。

水平选项卡

HTML 结构

创建水平选项卡的 HTML 结构非常简单，只需在一个容器元素中添加多个按钮和多个内容容器即可。

<div class="tab">
  <button class="tablinks" 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 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>
</div>

其中，tab 类名的容器元素用于包含所有选项卡，tablinks 类名的按钮用于切换选项卡，tabcontent 类名的内容容器包含每个选项卡的内容，这些类名可以根据实际需要进行修改。

CSS 样式

为了让选项卡的样式更美观，我们需要添加一些 CSS 样式。

/* 隐藏所有选项卡内容 */
.tabcontent {
  display: none;
}

/* 设置选项卡按钮样式 */
.tab button {
  background-color: #e6e6e6;
  color: #333;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  margin-right: 5px;
}

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

/* 显示当前选项卡的内容 */
.tabcontent.show {
  display: block;
}

其中，.tabcontent 类用于隐藏所有选项卡内容，.tab button 类用于设置选项卡按钮的样式，.tab button.active 类表示当前选中的按钮，.tabcontent.show 类用于显示当前选项卡的内容。

JavaScript 函数

为了使选项卡可以被切换，我们需要创建一个 JavaScript 函数来处理点击事件。

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;

  // 隐藏所有选项卡内容
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].classList.remove("show");
  }

  // 将所有选项卡按钮设置为非激活状态
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove("active");
  }

  // 显示当前选项卡的内容
  document.getElementById(tabName).classList.add("show");

  // 将当前选项卡按钮设置为激活状态
  evt.currentTarget.classList.add("active");
}

该函数接受两个参数，第一个参数 evt 表示点击事件对象，第二个参数 tabName 表示要显示的选项卡的 ID。

在函数中，我们首先隐藏所有选项卡的内容和设置所有选项卡按钮为非激活状态，然后再显示当前选项卡的内容和设置当前选项卡按钮为激活状态。

完整代码

完整的水平选项卡的 HTML、CSS、JavaScript 代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 隐藏所有选项卡内容 */
      .tabcontent {
        display: none;
      }

      /* 设置选项卡按钮样式 */
      .tab button {
        background-color: #e6e6e6;
        color: #333;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        margin-right: 5px;
      }

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

      /* 显示当前选项卡的内容 */
      .tabcontent.show {
        display: block;
      }
    </style>
  </head>

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

      <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>
    </div>

    <script>
      function openTab(evt, tabName) {
        var i, tabcontent, tablinks;

        // 隐藏所有选项卡内容
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].classList.remove("show");
        }

        // 将所有选项卡按钮设置为非激活状态
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
          tablinks[i].classList.remove("active");
        }

        // 显示当前选项卡的内容
        document.getElementById(tabName).classList.add("show");

        // 将当前选项卡按钮设置为激活状态
        evt.currentTarget.classList.add("active");
      }

      document.getElementById("defaultOpen").click();
    </script>
  </body>
</html>

垂直选项卡

垂直选项卡和水平选项卡的实现原理相同，只是 HTML 结构和 CSS 样式有所不同。

HTML 结构

创建垂直选项卡，我们只需要将每个选项卡的按钮和内容容器放在一个容器元素中，并将它们排列成一列即可。

<div class="tab">
  <div class="tablinks" onclick="openTab(event, 'tab1')">选项卡1</div>
  <div class="tablinks" onclick="openTab(event, 'tab2')">选项卡2</div>
  <div class="tablinks" onclick="openTab(event, 'tab3')">选项卡3</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>
</div>

其中，.tablinks 类名的按钮和 .tabcontent 类名的内容容器都只需要放到同一容器元素中即可。

CSS 样式

为了让垂直选项卡的样式更美观，我们需要添加一些 CSS 样式。

/* 设置选项卡按钮样式 */
.tab .tablinks {
  background-color: #e6e6e6;
  color: #333;
  padding: 14px 16px;
  margin-right: -1px;
  border: 1px solid #ccc;
  cursor: pointer;
}

/* 设置选项卡按钮激活状态样式 */
.tab .tablinks.active {
  background-color: #ccc;
  color: #fff;
}

/* 显示当前选项卡的内容 */
.tabcontent.show {
  display: block;
}

/* 设置选项卡内容样式 */
.tab .tabcontent {
  display: none;
  padding: 5px;
  border: 1px solid #ccc;
}

其中，.tab .tablinks 类用于设置选项卡按钮的样式，.tab .tablinks.active 类表示当前选中的按钮，.tabcontent.show 类用于显示当前选项卡的内容，.tab .tabcontent 类用于设置选项卡内容的样式。

JavaScript 函数

垂直选项卡的 JavaScript 函数与水平选项卡完全相同，因此不再赘述。

完整代码

完整的垂直选项卡的 HTML、CSS、JavaScript 代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 设置选项卡按钮样式 */
      .tab .tablinks {
        background-color: #e6e6e6;
        color: #333;
        padding: 14px 16px;
        margin-right: -1px;
        border: 1px solid #ccc;
        cursor: pointer;
      }

      /* 设置选项卡按钮激活状态样式 */
      .tab .tablinks.active {
        background-color: #ccc;
        color: #fff;
      }

      /* 显示当前选项卡的内容 */
      .tabcontent.show {
        display: block;
      }

      /* 设置选项卡内容样式 */
      .tab .tabcontent {
        display: none;
        padding: 5px;
        border: 1px solid #ccc;
      }
    </style>
  </head>

  <body>
    <div class="tab">
      <div class="tablinks" onclick="openTab(event, 'tab1')">选项卡1</div>
      <div class="tablinks" onclick="openTab(event, 'tab2')">选项卡2</div>
      <div class="tablinks" onclick="openTab(event, 'tab3')">选项卡3</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>
    </div>

    <script>
      function openTab(evt, tabName) {
        var i, tabcontent, tablinks;

        // 隐藏所有选项卡内容
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].classList.remove("show");
        }

        // 将所有选项卡按钮设置为非激活状态
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
          tablinks[i].classList.remove("active");
        }

        // 显示当前选项卡的内容
        document.getElementById(tabName).classList.add("show");

        // 将当前选项卡按钮设置为激活状态
        evt.currentTarget.classList.add("active");
      }
    </script>
  </body>
</html>

至此，我们已经学会了如何使用 JavaScript 创建水平和垂直选项卡。