如何使用 CSS 和 JavaScript 创建标签页眉?
javascriptweb developmentfront end technology更新于 2024/6/15 5:15:00
在本文中，我们将讨论如何使用 CSS 和 JavaScript 创建标签页眉。
页眉元素表示使用一些介绍性内容或一组导航链接的容器。一般来说，标题元素通常包含一个或多个元素。
标签标题表示每个选项卡中的内容，或提供一些导航链接，将用户链接到他们单击的任何选项卡。
创建标签标题的步骤
使用 JavaScript 创建标签标题的步骤如下 -
定义一个具有两个参数evt 和name的函数。
声明变量 tabcontent 并通过 document.getElementByClassName 将类名分配给 tabcontent 变量来为其分配按钮。
迭代 for 循环并使用样式属性display is none避免自动显示。
声明 tablinks 变量并为其分配按钮链接，迭代 for 循环并使用 tablinks.className.replace("aactive") 使按钮处于活动状态
最后调用 evt 和 name 参数，并使 name display 块和 evt class 处于活动状态。
示例
以下是使用 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>
