极客笔记如何使用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循环遍历所有子元素并隐藏它们。还要从所有标签中移除active类。
-
第4步 - 标签的类与其内容div元素的id相同。因此，我们可以获取点击的标签的第一个类，并将其作为id获取内容div。
-
第5步 - 然后，将内容div的显示更改为在屏幕上显示，并将active类添加到点击的标签的类列表中。
示例
在下面的示例中，我们通过应用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，而‘tabs’包含所有选项卡。
示例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>