如何使用 CSS 和 JavaScript 创建垂直选项卡菜单?

cssjavascriptweb developmentfront end technology更新于 2024/8/22 9:48:17

在本文中，我们将讨论如何使用 CSS 和 JavaScript 创建垂直选项卡菜单。

选项卡是一种容器，其主要目的是显示和浏览网站的各种内容。选项卡通常用于管理空间并使网站更加用户友好，而无需重新加载太多次。这些选项卡中的内容通常紧密相关但又相互排斥。

有几种类型的选项卡，可在各种情况下创建和使用 -

水平选项卡
带有辅助选项卡的水平选项卡
无框水平选项卡
垂直选项卡
带有辅助选项卡的垂直选项卡

垂直选项卡也会划分数据，但垂直排列。它们具有水平选项卡的所有主要特征，但如果选项卡数量较多，则具有更好的可扩展性。垂直选项卡还提供了额外的描述部分，用于总结选项卡的内容。

创建选项卡的步骤

以下是使用 CSS 和 JavaScript 创建选项卡的步骤 -

在正文中，标签在 div 标签下创建选项卡，该标签具有自定义数据属性。
创建另一个 div 标签，用于存储具有指定 id 的选项卡的内容。
为每个内容标签指定数据属性，以便一次只显示一个内容选项卡
使用 JavaScript，我们可以显示选项卡的内容。

Example.html

在此部分，我们通过构建三个垂直方向的按钮(Tab1、Tab2 和 Tab3)和三个 div 段落来构建页面的正文结构。从下面的代码中你可以看到。

<!--HTML 代码-->
<div class="tab">
   <button class="tablinks" onclick="JavaScript:selectTab('tab1');">
      Tab1
   </button>
   <button class="tablinks" onclick="JavaScript:selectTab('tab2');">
      Tab2
   </button>
   <button class="tablinks" onclick="JavaScript:selectTab('tab3');">
      Tab3
   </button>
   </div>
   <div id="tab1" class="tabcontent">
      <h3>TAB First</h3>
      <p>Tutorialspoint Easy To learn</p>
   </div>
   <div id="tab2" class="tabcontent">
      <h3>TAB Second</h3>
      <p>Hyderabad Telangana, Madhapur Above D-Mart 4th Floor.</p>
   </div>
   <div id="tab3" class="tabcontent">
      <h3>Tab Third</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi magniomnis reiciendis ullam perspiciatis labore obcaecati tenetur vitae eteius voluptate optio saepe porro, officiis quos praesentium enim undesequi?</p>
   </div>

Example.css

在此部分中，样式已添加到页面。设置按钮的宽度和高度，以及创建悬停效果并在将鼠标悬停在按钮上时更改按钮的背景颜色。

<style>
   /*CSS*/
   * {
      box-sizing: border-box;
   }
   .tab {
      float: left;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
      width: 20%;
   }
   /* Style the buttons that are used to open the tab content */
   .tab button {
      display: block;
      background-color: inherit;
      color: black;
      padding: 22px 16px;
      width: 100%;
      border: none;
      outline: none;
      cursor: pointer;
      transition: 0.3s;
   }
   .tab button:hover{
      background-color: rgb(18, 84, 198);
   }
   .tabcontent {
      float: left;
      padding: 0px 12px;
      border: 1px solid #ccc;
      width: 80%;
      border-left: none;
      height: 180px;
      display: none;
      text-align: center;
      background-color: antiquewhite;
   }
</style>

Example.js

在这一部分中，我们构造一个函数 selectTab 并将 tabindex 作为参数传递，同时添加样式 display 属性，这样当您点击按钮时，选项卡内容就会显示在页面上。正如您从下面的代码中看到的那样。

<!-- Java script -->
<script>
   function selectTab(tabIndex) {
        // 声明所有变量
        var i, tabcontent;
        
        // 获取所有带有 class="tabcontent" 的元素并隐藏它们
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        //显示选定的选项卡
        document.getElementById(tabIndex).style.display = "block";
   }
</script>

完整示例

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Tab</title>
   <style>
     /*CSS*/
     * {
         box-sizing: border-box;
     }
     .tab {
         float: left;
         border: 1px solid #ccc;
         background-color: #f1f1f1;
         width: 20%;
     }
     /* Style the buttons that are used to open the tab content */
     .tab button {
         display: block;
         background-color: inherit;
         color: black;
         padding: 22px 16px;
         width: 100%;
         border: none;
         outline: none;
         cursor: pointer;
         transition: 0.3s;
      }
     .tab button:hover{
         background-color: rgb(18, 84, 198);
     }
     .tabcontent {
         float: left;
         padding: 0px 12px;
         border: 1px solid #ccc;
         width: 80%;
         border-left: none;
         height: 180px;
         display: none;
         text-align: center;
         background-color: antiquewhite;
     }
   </style>
</head>
<body>
   <!--HTML Code-->
   <div class="tab">
   <button class="tablinks" onclick="JavaScript:selectTab('tab1');">
      Tab1
   </button>
   <button class="tablinks" onclick="JavaScript:selectTab('tab2');">
      Tab2
   </button>
   <button class="tablinks" onclick="JavaScript:selectTab('tab3');">
      Tab3
   </button>
   </div>
   <div id="tab1" class="tabcontent">
      <h3>TAB First</h3>
      <p>Tutorialspoint Easy To learn</p>
   </div>
   <div id="tab2" class="tabcontent">
      <h3>TAB Second</h3>
      <p>Hyderabad Telangana, Madhapur Above D-Mart 4th Floor.</p>
   </div>
   <div id="tab3" class="tabcontent">
      <h3>Tab Third</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi magniomnis reiciendis ullam perspiciatis labore obcaecati tenetur vitae eteius voluptate optio saepe porro, officiis quos praesentium enim undesequi?</p>
   </div>
   <!-- Java script -->
   <script>
      function selectTab(tabIndex) {
        // 声明所有变量
        var i, tabcontent;
        
        // 获取所有带有 class="tabcontent" 的元素并隐藏它们
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        //显示选定的选项卡
        document.getElementById(tabIndex).style.display = "block";
      }
   </script>
</body>
</html>