数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用CSS和JavaScript创建选项卡？
在本文中，我们将讨论如何使用CSS和JavaScript创建选项卡。
选项卡是容器，其主要目的是显示和浏览网站的不同内容。选项卡通常用于管理空间，并使网站更易于使用，而无需多次重新加载。这些选项卡中的内容通常密切相关，但互不排斥。
有几种类型的选项卡可以在各种情况下创建和使用：
水平选项卡
带有二级选项卡的水平选项卡
无边框水平选项卡
垂直选项卡
带有二级选项卡的垂直选项卡
创建选项卡的步骤
以下是使用CSS和JavaScript创建选项卡的步骤：
在body中，`div`标签创建带有自定义数据属性的选项卡。
创建另一个`div`标签来存储具有指定id的选项卡内容。
为每个内容标签指定数据属性，以便一次只显示一个选项卡的内容。
使用JavaScript，我们可以显示选项卡的内容。
Example.html
在HTML脚本中，我们通过构建三个div按钮（Tab1、Tab2和Tab3）和三个div段落来构建页面的主体结构，如下面的代码所示。
<!-- HTML Of the Tab --> <div id="tab1" onClick="JavaScript:selectTab(1);">Tab 1</div> <div id="tab2" onClick="JavaScript:selectTab(2);">Tab 2</div> <div id="tab3" onClick="JavaScript:selectTab(3);">Tab 3</div> <br /> <div id="tab1Content">This is first tab.</div> <div id="tab2Content">This is Second tab</div> <div id="tab3Content">This is third tab</div>
Example.css
使用CSS，为页面添加样式。设置页面的宽度和高度样式，以及创建悬停效果，并在鼠标悬停在按钮上时更改按钮的背景颜色。
<!-- style of the tab-->
<style>
#tab1,
#tab2,
#tab3 {
text-align: center;
float: left;
padding: 5px 10px 5px 10px;
background: #b00098;
color: #ffffff;
margin: 0px 5px 0px 5px;
cursor: pointer;
border-radius: 5px;
}
#tab1:hover,
#tab2:hover,
#tab3:hover {
background: #ecade4;
}
#tab1Content,
#tab2Content,
#tab3Content {
width: auto;
height: 100px;
padding: 20px;
border: 1px solid #b00098;
border-radius: 10px;
}
#tab1Content,
#tab2Content,
#tab3Content {
display: none;
}
</style>
Example.js
使用JavaScript，我们正在构建一个名为selectTab的函数，并将tabindex作为参数传递，并添加style display属性，以便当您单击按钮时，选项卡内容会显示在页面上。让我们在下面的代码中查看。
<!-- Javascript Code of the tab -->
<script>
function selectTab(tabIndex) {
//Hide All Tabs
document.getElementById("tab1Content").style.display = "none";
document.getElementById("tab2Content").style.display = "none";
document.getElementById("tab3Content").style.display = "none";
//Show the Selected Tab
document.getElementById("tab" + tabIndex + "Content").style.display =
"block";
}
</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>Tab using javascript</title>
<!-- style of the tab-->
<style>
#tab1,
#tab2,
#tab3 {
text-align: center;
float: left;
padding: 5px 10px 5px 10px;
background: #b00098;
color: #ffffff;
margin: 0px 5px 0px 5px;
cursor: pointer;
border-radius: 5px;
}
#tab1:hover,
#tab2:hover,
#tab3:hover {
background: #ecade4;
}
#tab1Content,
#tab2Content,
#tab3Content {
width: auto;
height: 100px;
padding: 20px;
border: 1px solid #b00098;
border-radius: 10px;
}
#tab1Content,
#tab2Content,
#tab3Content {
display: none;
}
</style>
</head>
<body>
<!-- HTML Of the Tab -->
<div id="tab1" onClick="JavaScript:selectTab(1);">Tab 1</div>
<div id="tab2" onClick="JavaScript:selectTab(2);">Tab 2</div>
<div id="tab3" onClick="JavaScript:selectTab(3);">Tab 3</div>
<br />
<div id="tab1Content">This is first tab.</div>
<div id="tab2Content">This is Second tab</div>
<div id="tab3Content">This is third tab</div>
<!-- Javascript Code of the tab -->
<script>
function selectTab(tabIndex) {
//Hide All Tabs
document.getElementById("tab1Content").style.display = "none";
document.getElementById("tab2Content").style.display = "none";
document.getElementById("tab3Content").style.display = "none";
//Show the Selected Tab
document.getElementById("tab" + tabIndex + "Content").style.display =
"block";
}
</script>
</body>
</html>
更新于：2022年12月19日
6K+ 次浏览
广告