数据结构
网络
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+ 浏览量
广告