資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用CSS和JavaScript建立選項卡？
在本文中，我們將討論如何使用CSS和JavaScript建立選項卡。
選項卡是容器，其主要目的是顯示和瀏覽網站的不同內容。選項卡通常用於管理空間，並使網站更易於使用，而無需多次重新載入。這些選項卡中的內容通常密切相關，但互不排斥。
有幾種型別的選項卡可以在各種情況下建立和使用：
水平選項卡
帶有二級選項卡的水平選項卡
無邊框水平選項卡
垂直選項卡
帶有二級選項卡的垂直選項卡
建立選項卡的步驟
以下是使用CSS和JavaScript建立選項卡的步驟：
在body中，`div`標籤建立帶有自定義資料屬性的選項卡。
建立另一個`div`標籤來儲存具有指定id的選項卡內容。
為每個內容標籤指定資料屬性，以便一次只顯示一個選項卡的內容。
使用JavaScript，我們可以顯示選項卡的內容。
Example.html
在HTML指令碼中，我們透過構建三個div按鈕（Tab1、Tab2和Tab3）和三個div段落來構建頁面的主體結構，如下面的程式碼所示。
<!-- HTML Of the Tab --> <div id="tab1" onClick="JavaScript:selectTab(1);">Tab 1</div> <div id="tab2" onClick="JavaScript:selectTab(2);">Tab 2</div> <div id="tab3" onClick="JavaScript:selectTab(3);">Tab 3</div> <br /> <div id="tab1Content">This is first tab.</div> <div id="tab2Content">This is Second tab</div> <div id="tab3Content">This is third tab</div>
Example.css
使用CSS，為頁面新增樣式。設定頁面的寬度和高度樣式，以及建立懸停效果，並在滑鼠懸停在按鈕上時更改按鈕的背景顏色。
<!-- style of the tab-->
<style>
#tab1,
#tab2,
#tab3 {
text-align: center;
float: left;
padding: 5px 10px 5px 10px;
background: #b00098;
color: #ffffff;
margin: 0px 5px 0px 5px;
cursor: pointer;
border-radius: 5px;
}
#tab1:hover,
#tab2:hover,
#tab3:hover {
background: #ecade4;
}
#tab1Content,
#tab2Content,
#tab3Content {
width: auto;
height: 100px;
padding: 20px;
border: 1px solid #b00098;
border-radius: 10px;
}
#tab1Content,
#tab2Content,
#tab3Content {
display: none;
}
</style>
Example.js
使用JavaScript，我們正在構建一個名為selectTab的函式，並將tabindex作為引數傳遞，並新增style display屬性，以便當您單擊按鈕時，選項卡內容會顯示在頁面上。讓我們在下面的程式碼中檢視。
<!-- Javascript Code of the tab -->
<script>
function selectTab(tabIndex) {
//Hide All Tabs
document.getElementById("tab1Content").style.display = "none";
document.getElementById("tab2Content").style.display = "none";
document.getElementById("tab3Content").style.display = "none";
//Show the Selected Tab
document.getElementById("tab" + tabIndex + "Content").style.display =
"block";
}
</script>
完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tab using javascript</title>
<!-- style of the tab-->
<style>
#tab1,
#tab2,
#tab3 {
text-align: center;
float: left;
padding: 5px 10px 5px 10px;
background: #b00098;
color: #ffffff;
margin: 0px 5px 0px 5px;
cursor: pointer;
border-radius: 5px;
}
#tab1:hover,
#tab2:hover,
#tab3:hover {
background: #ecade4;
}
#tab1Content,
#tab2Content,
#tab3Content {
width: auto;
height: 100px;
padding: 20px;
border: 1px solid #b00098;
border-radius: 10px;
}
#tab1Content,
#tab2Content,
#tab3Content {
display: none;
}
</style>
</head>
<body>
<!-- HTML Of the Tab -->
<div id="tab1" onClick="JavaScript:selectTab(1);">Tab 1</div>
<div id="tab2" onClick="JavaScript:selectTab(2);">Tab 2</div>
<div id="tab3" onClick="JavaScript:selectTab(3);">Tab 3</div>
<br />
<div id="tab1Content">This is first tab.</div>
<div id="tab2Content">This is Second tab</div>
<div id="tab3Content">This is third tab</div>
<!-- Javascript Code of the tab -->
<script>
function selectTab(tabIndex) {
//Hide All Tabs
document.getElementById("tab1Content").style.display = "none";
document.getElementById("tab2Content").style.display = "none";
document.getElementById("tab3Content").style.display = "none";
//Show the Selected Tab
document.getElementById("tab" + tabIndex + "Content").style.display =
"block";
}
</script>
</body>
</html>
更新於：2022年12月19日
6K+ 次瀏覽
廣告