資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用CSS和JavaScript建立選項卡標題？
在本文中，我們將討論如何使用CSS和JavaScript建立選項卡標題。
標題元素使用一些介紹性內容或一組導航連結來表示容器。通常，標題元素通常包含一個或多個元素。
選項卡標題表示每個選項卡中存在的內容，或提供一些導航連結，這些連結將使用者連結到他們點選的任何選項卡。
建立選項卡標題的步驟
使用JavaScript建立選項卡標題的步驟如下：
定義一個具有兩個引數evt和name的函式。
宣告變數tabcontent，並透過使用document.getElementByClassName將按鈕賦值給tabcontent變數。
迭代for迴圈，並使用style屬性display為none避免自動顯示。
宣告變數tablinks，併為其分配按鈕連結，迭代for迴圈，並使用tablinks.className.replace("aactive")使按鈕處於活動狀態。
最後呼叫evt和name引數，並使name顯示為塊，evt類為活動狀態。
示例
以下是使用CSS和JavaScript建立標題的示例：
Example.html
在這個示例中，我們使用HTML程式碼建立了3個用於3個不同選項卡的div元素，並且我們建立了3個按鈕，分別命名為HTML、CSS和JAVASCRIPT。
在每個按鈕中，我們都為onclick事件編寫了一個函式，該函式呼叫相應的div元素。
<body>
<div class="tab">
<button class="tablinks" onclick="langName(event, 'HTML')">HTML</button>
<button class="tablinks" onclick="langName(event, 'CSS')">CSS</button>
<button class="tablinks" onclick="langName(event, 'JAVASCRIPT')">
JAVASCRIPT
</button>
</div>
<div id="HTML" class="tabcontent">
<h3>HTML</h3>
<p>This is Html</p>
</div>
<div id="CSS" class="tabcontent">
<h3>CSS</h3>
<p>This is CSS</p>
</div>
<div id="JAVASCRIPT" class="tabcontent">
<h3>Javascript</h3>
<p>This is Javascript</p>
</div>
Example.css
使用CSS程式碼，我們為選項卡按鈕設定不同的背景顏色，併為選項卡的頭部新增懸停效果。
<style>
body {
font-family: Arial;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: #f1f1f1;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: rgb(173, 150, 232);
}
/* Create an active/current tablink class */
.tab button.active {
background-color: rgb(173, 150, 232);;
}
/* Style the tab content */
.tabcontent {
text-align: center;
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
</style>
Example.js
在JavaScript部分，我們嘗試在使用者單擊相應的按鈕時在選項卡之間切換。
<script>
function langName(evt, name) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(name).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
完整示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: #f1f1f1;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: rgb(173, 150, 232);
}
/* Create an active/current tablink class */
.tab button.active {
background-color: rgb(173, 150, 232);;
}
/* Style the tab content */
.tabcontent {
text-align: center;
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="langName(event, 'HTML')">HTML</button>
<button class="tablinks" onclick="langName(event, 'CSS')">CSS</button>
<button class="tablinks" onclick="langName(event, 'JAVASCRIPT')">
JAVASCRIPT
</button>
</div>
<div id="HTML" class="tabcontent">
<h3>HTML</h3>
<p>This is Html</p>
</div>
<div id="CSS" class="tabcontent">
<h3>CSS</h3>
<p>This is CSS</p>
</div>
<div id="JAVASCRIPT" class="tabcontent">
<h3>Javascript</h3>
<p>This is Javascript</p>
</div>
<script>
function langName(evt, name) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(name).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
更新於：2022年12月19日
963 次瀏覽
廣告