資料結構
網路
關係型資料庫管理系統
作業系統
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 次檢視
廣告