数据结构
网络
关系数据库管理系统(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 次浏览
广告