如何使用 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+ 次瀏覽

開啟您的 職業生涯

完成課程獲得認證

開始學習
廣告