資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會研究
時裝研究
法律研究如何使用 CSS 和 JavaScript 在 hover 時更改標籤頁？
在本文中，我們將探討如何使用 CSS 和 JavaScript 在 hover 時更改標籤頁。
懸停標籤頁 是訪問其他標籤頁內容而不離開當前標籤頁的最簡單方法。當你懸停在當前未開啟的標籤頁上時，其內部的內容將顯示在一個小視窗中。
假設你正在使用 Google Chrome 瀏覽器，並打開了兩個標籤頁：一個標籤頁打開了一個部落格，另一個標籤頁打開了一個社交媒體網站。當你在訪問部落格標籤頁的同時懸停在社交媒體網路標籤頁上時，社交媒體網路的內容頁將顯示在一個小視窗中。
我們可以使用本文中討論的示例來建立這樣的懸停標籤頁。
示例
以下是如何使用 CSS 和 JavaScript 在 hover 時更改標籤頁的示例 –
Example.css
使用 CSS 程式碼，我們對按鈕進行樣式化，並提供它們的寬高，以及活動類和新增懸停效果。
<style>
body {
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 0;
height: 100vh;
display: grid;
place-items: center;
}
.tab-container {
width: 992px;
}
.row {
display: flex;
}
.col-3,
.col-9 {
padding: 0.5rem;
}
.col-3 {
width: 24.9%;
}
.col-9 {
width: 75.1%;
}
.btn {
display: block;
margin: 0.75rem 0;
width: 100%;
padding: 0.75rem;
border: none;
outline: none;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 1.1rem;
}
.btn.active {
background-color: #fff;
box-shadow: 1px 1px 4px 0 #ccc;
border: 1px solid #ccc;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
span {
color: red;
font-weight: bold;
}
</style>
Example.html
在此示例中，使用 HTML 程式碼，我們為 3 個不同的選項卡建立了 3 個 div 元素，我們建立了 3 個按鈕，分別是 HTML、CSS 和 JAVASCRIPT。
在每個按鈕中，我們都針對每個 div 的 ID，該 ID 會呼叫相應的 div 元素。
<!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>Vertical Tab</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="tab-container">
<div class="row">
<div class="col-3">
<button class="btn" data-target="#html">HTMl</button>
<button class="btn active" data-target="#CSS">CSS</button>
<button class="btn" data-target="#js">JAVASCRIPT</button>
</div>
<div class="col-9">
<div class="tab-content" id="html">
<h3>HTML</h3>
<p>This is <span> HTML</span></p>
</div>
<div class="tab-content active" id="CSS">
<h3>CSS</h3>
<p>This is <span>CSS</span></p>
</div>
<div class="tab-content" id="js">
<h3>JavaScript</h3>
<p>This is <span>JavaScript</span></p>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Example.js
在 JavaScript 部分，當用戶將滑鼠懸停在相應的按鈕上並新增活動類時，我們嘗試在選項卡之間切換。
<script>
const btns = document.querySelectorAll(".btn");
const tabContents = document.querySelectorAll(".tab-content");
btns.forEach((btn) => {
btn.addEventListener("mouseover", () => {
btns.forEach((btn) => btn.classList.remove("active"));
tabContents.forEach((tabContent) => tabContent.classList.remove("active"));
btn.classList.add("active");
document.querySelector(btn.dataset.target).classList.add("active");
});
});
</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>Vertical Tab</title>
<style>
body {
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 0;
height: 100vh;
display: grid;
place-items: center;
}
.tab-container {
width: 992px;
}
.row {
display: flex;
}
.col-3,
.col-9 {
padding: 0.5rem;
}
.col-3 {
width: 24.9%;
}
.col-9 {
width: 75.1%;
}
.btn {
display: block;
margin: 0.75rem 0;
width: 100%;
padding: 0.75rem;
border: none;
outline: none;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 1.1rem;
}
.btn.active {
background-color: #fff;
box-shadow: 1px 1px 4px 0 #ccc;
border: 1px solid #ccc;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
span {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="tab-container">
<div class="row">
<div class="col-3">
<button class="btn" data-target="#html">HTMl</button>
<button class="btn active" data-target="#CSS">CSS</button>
<button class="btn" data-target="#js">JAVASCRIPT</button>
</div>
<div class="col-9">
<div class="tab-content" id="html">
<h3>HTML</h3>
<p>This is <span> HTML</span></p>
</div>
<div class="tab-content active" id="CSS">
<h3>CSS</h3>
<p>This is <span>CSS</span></p>
</div>
<div class="tab-content" id="js">
<h3>JavaScript</h3>
<p>This is <span>JavaScript</span></p>
</div>
</div>
</div>
</div>
<script>
const btns = document.querySelectorAll(".btn");
const tabContents = document.querySelectorAll(".tab-content");
btns.forEach((btn) => {
btn.addEventListener("mouseover", () => {
btns.forEach((btn) => btn.classList.remove("active"));
tabContents.forEach((tabContent) =>
tabContent.classList.remove("active")
);
btn.classList.add("active");
document.querySelector(btn.dataset.target).classList.add("active");
});
});
</script>
</body>
</html>
更新於： 19-Dec-2022
2K+ 瀏覽量
廣告