如何使用 CSS 和 JavaScript 创建垂直标签菜单？

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

标签是容器，其主要目的是显示和浏览网站的不同内容。标签通常用于管理空间，并在不频繁重新加载的情况下使网站更易于用户使用。这些标签中的内容通常密切相关，但相互排斥。

有几种类型的标签可以在各种情况下创建和使用：

  • 水平标签

  • 带有二级标签的水平标签

  • 无边框水平标签

  • 垂直标签

  • 带有二级标签的垂直标签

垂直标签也划分数据，但排列方式是垂直的。它们共享水平标签的所有主要特性，但是如果标签数量较多，则垂直标签的可扩展性更好。垂直标签还提供额外的描述区域来总结标签的内容。

创建标签的步骤

以下是使用 CSS 和 JavaScript 创建标签的步骤：

  • 在主体中，`

    `标签在`
    `标签下创建标签，该标签具有自定义数据属性。

  • 创建另一个`

    `标签来存储具有指定 ID 的标签内容。

  • 为每个内容标签指定数据属性，以便一次只显示一个标签内容。

  • 使用 JavaScript，我们可以显示标签的内容。

Example.html

在本部分中，我们通过垂直方向构建三个按钮（Tab1、Tab2 和 Tab3）和三个`

`段落来构建页面的主体结构。如下面的代码所示。

<!--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>

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) {
      // Declare all variables
      var i, tabcontent;
     
      // Get all elements with class="tabcontent" and hide them
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
         tabcontent[i].style.display = "none";
      }
      //Show the Selected Tab
      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) {
         // Declare all variables
         var i, tabcontent;
         
         // Get all elements with class="tabcontent" and hide them
         tabcontent = document.getElementsByClassName("tabcontent");
         for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
         }
         //Show the Selected Tab
         document.getElementById(tabIndex).style.display = "block";
      }
   </script>
</body>
</html>

更新于：2022-12-19

3K+ 次浏览

开启您的 职业生涯

完成课程获得认证

开始学习
广告