JavaScript 如何创建水平和垂直标签

我们可以使用HTML、CSS和JavaScript来创建标签。可以有两种类型的标签。一种是 水平标签 ，另一种是 垂直标签。 标签允许我们在非常小的空间内显示不同的内容，因为我们可以根据不同的标签来显示不同的内容。

我们将学习如何使用HTML、CSS和JavaScript从头开始创建水平和垂直标签。

创建水平标签

我们可以通过创建水平标签在一行中显示所有标签。此外，我们还可以在所有标签下面显示所选标签的内容。

语法

用户可以按照下面的语法来使用JavaScript管理水平标签。

for (let i = 0; i < childs.length; i++) {
   childs[i].addEventListener('click', () => {
      // hide all content divs and remove the active class from all tab
      // After that, add the active class to clicked tab and show the content of the clicked tab
      currentElement = childs[i].classList[0];
      element = document.getElementById(currentElement);
      element.style.display = "block";
      childs[i].classList.add("active");
   })
}

在上面的语法中，我们访问了所有的标签，并通过遍历所有标签的HTML集合为所有标签添加了一个点击事件。我们激活被点击的标签，并在addEventListner()方法中显示其内容。

算法

第1步 – 在JavaScript中访问所有的标签。
第2步 – 使用for循环遍历所有标签，并使用 addEventListner() 方法添加一个点击事件。
第3步 – 在 addEventListner() 方法的回调函数中，首先使用另一个for循环来迭代所有的孩子并隐藏他们。同时，从所有标签中删除活动类。
第4步 – 标签的类与它的内容div元素的id相同。所以，我们可以得到被点击的标签的第一个类，并使用它作为id来得到内容div。
第5步 – 之后，改变content div的显示方式以在屏幕上显示它，并将活动类添加到被点击标签的类列表中。

例子

在下面的例子中，我们通过应用CSS创建了水平标签。此外，我们还使用了JavaScript，正如上面的算法所解释的，来管理被点击的标签内容。

在输出中，用户可以观察到只有一个标签保持活跃。

<html>
<head>
   <style>
      .tabs {
         display: flex;
         flex-direction: row;
         cursor: pointer;
      }

      .tabs div {
         padding: 5px 15px;
         font-size: 1.2rem;
         border: 1px solid blue;
      }

      .active {
         background-color: grey;
      }

      .tab-content {
         margin-top: 10px;
         border: 3px solid blue;
         width: 400px;
         font-size: 2rem;
         border-radius: 12px;
         height: 5rem;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .tab-content div {
         display: none;
      }
   </style>
</head>
<body>
   <h2> Creating the horizontal tabs using <i> HTML, CSS, and JavaScript. </i> </h2>
   <!-- creating tabs -->
   <div class = "tabs" id = "tabs">
      <div class = "1 tab"> Tab 1 </div>
      <div class = "2 tab"> Tab 2 </div>
      <div class = "3 tab"> Tab 3 </div>
      <div class = "4 tab"> Tab 4 </div>
   </div>
   <!-- content of different tabs -->
   <div class = "tab-content">
      <div id = "1"> This is the content of the tab 1. </div>
      <div id = "2"> This is the content of the tab 2. </div>
      <div id = "3"> This is the content of the tab 3. </div>
      <div id = "4"> This is the content of the tab 4. </div>
   </div>
</body>
<script>
   let tabs = document.getElementById('tabs');
   let childs = tabs.children;
   var currentElement = "1";
   let element = null;

   // iterate through all children (tabs)
   for (let i = 0; i < childs.length; i++) {
      // adding click event to every element
      childs[i].addEventListener('click', () => {
            for (let j = 0; j < childs.length; j++) {
            currentElement = childs[j].classList[0];
            element = document.getElementById(currentElement);

            // hide content of all div elements
            element.style.display = "none";

            // remove the active class from all tab
            childs[j].classList.remove("active");
         }
         // show the content of ith div
         currentElement = childs[i].classList[0];
         element = document.getElementById(currentElement);
         element.style.display = "block";

         // add the active class to the ith tab.
         childs[i].classList.add("active");
      })
   }
</script>
</html>

创建垂直标签

我们可以通过创建垂直标签在一列中显示所有标签。此外，我们还可以并排显示标签和它们的内容。

语法

用户可以按照下面的语法，将水平标签转换成垂直标签。

// show tabs and their content side by side
   .container {
      display: flex;
      flex-direction: row;      
   }
// show tabs vertically
   .tabs {
      display: flex;
      flex-direction: column;
   }

在上面的语法中，我们使用CSS从水平标签中创建垂直标签。容器是主要的div，标签和它们的内容都在其中，而 “标签 “包含所有标签。

例子2

下面的例子与第一个例子几乎相似。我们只是改变了CSS来显示所有的垂直和内容以及并排的标签。

<html>
<head>
   <style>
      .container {
         display: flex;
         flex-direction: row;
         width: 700px;
      }

      .tabs {
         display: flex;
         flex-direction: column;
         cursor: pointer;
      }

      .tabs div {
         padding: 5px 15px;
         font-size: 1.2rem;
         border: 1px solid blue;
      }

      .active {
         background-color: grey;
      }

      .tab-content {
         margin-top: 10px;
         border: 3px solid green;
         width: 400px;
         font-size: 2rem;
         border-radius: 12px;
         margin-left: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .tab-content div {
         display: none;
      }
   </style>
</head>
<body>
   <h2> Creating the vertical tabs using <i> HTML, CSS, and JavaScript. </i> </h2>

   <div class="container">
      <div class = "tabs" id = "tabs">
         <div class = "1 tab"> React JS </div>
         <div class = "2 tab"> Node JS </div>
         <div class = "3 tab"> JavaScript </div>
         <div class = "4 tab"> TypeScript </div>
      </div>
      <div class = "tab-content">
         <div id = "1"> It is a JavaScript library for the front end. </div>
         <div id = "2"> It is a run-time environment used to create a backend of the application. </div>
         <div id = "3"> It is used for the front end and back end of the application. </div>
         <div id = "4"> It is a superset of JavaScript in which we can also define the types of variables. </div>
      </div>
   </div>
</body>
   <script>
      let tabs = document.getElementById('tabs');
      let childs = tabs.children;
      var currentElement = "1";
      let element = null;
      for (let i = 0; i < childs.length; i++) {
         childs[i].addEventListener('click', () => {
               for (let j = 0; j < childs.length; j++) {
               currentElement = childs[j].classList[0];
               element = document.getElementById(currentElement);
               element.style.display = "none";
               childs[j].classList.remove("active");
            }
            currentElement = childs[i].classList[0];
            element = document.getElementById(currentElement);
            element.style.display = "block";
            childs[i].classList.add("active");
         })
      }
   </script>
</html>