极客教程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>