数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 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 从水平选项卡创建垂直选项卡。container 是包含选项卡及其内容的主 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>
更新于： 2023-03-07
936 次查看
广告