数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 CSS 和 JavaScript 创建全屏选项卡？
在本文中，我们将讨论如何使用 CSS 和 JavaScript 创建全屏选项卡。
顾名思义，全屏选项卡是在整个页面而不是某个区域显示的选项卡。
要创建全屏选项卡，您需要将页面的高度设置为 100%。您可以使用 height 属性来实现这一点，即您需要创建一个 CSS 类，然后将高度设置为100vh，并将此类作为您需要全屏长度的各个选项卡元素的样式类。
通过创建全屏选项卡，我们使网页内容的导航更加容易，您只需点击相应的标题即可移动到所需的页面。
创建全屏选项卡的步骤
以下是使用 JavaScript 创建选项卡标题的步骤：
定义一个具有三个参数name、element 和 color 的函数。
声明变量tabcontent并通过使用类名通过 document.getElementByClassName 将按钮分配给tabcontent变量。
迭代 for 循环并使用 style 属性display将其设置为none以避免自动显示。
声明tablinks变量并将其分配给按钮链接，迭代 for 循环并使用 tablinks[i].style.backgroundColor 更改背景颜色。
最后调用 name 和 element 参数，并使 document.getElementById(name).style.color = "block" 和 elemnt.style.backgroundColor = color。
示例
以下是如何使用 CSS 和 JavaScript 创建全屏选项卡的示例：
Example.html
在此示例中，我们使用 HTML 代码创建了 4 个 div 元素用于 4 个不同的选项卡，并且我们创建了 4 个按钮，分别为 HTML、CSS、JS 和 React。
在每个按钮中，我们都为 onclick 事件编写了一个函数，该函数调用相应的 div 元素。
我们将 style tabcontent 分配给创建的所有 div 元素。
<button class="tablink" onclick="langName('HTML', this, 'rgb(243, 122, 122)')" id="defaultOpen"> HTML </button>
<button class="tablink" onclick="langName('CSS', this, 'rgb(198, 237, 107)')"> CSS </button>
<button class="tablink" onclick="langName('JAVASCRIPT', this, 'rgb(51, 124, 249)')"> JS </button>
<button class="tablink" onclick="langName('react', this, 'rgb(234, 215, 93)')">React</button>
<div id="HTML" class="tabcontent">
<h1>HTML</h1>
<p>This is <span> HTML</span></p>
</div>
<div id="CSS" class="tabcontent">
<h1>CSS</h1>
<p>This is <span> CSS</span></p>
</div>
<div id="JAVASCRIPT" class="tabcontent">
<h1>JAVASCRIPT</h1>
<p>This is <span> javascript </span></p>
</div>
<div id="react" class="tabcontent">
<h1>React</h1>
<p>This is <span> Reactjs</span></p>
</div>
Example.css
使用 CSS 代码，我们为选项卡设置了不同的背景颜色，并在选项卡的头部添加了悬停效果。
此外，我们创建了一个名为 tabcontent 的样式，我们在其中将 height 属性值设置为100vh。
<style>
body {
font-family: "Lato", sans-serif;
}
.tablink {
background-color: rgba(0, 0, 0, 0.5);
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content */
.tabcontent {
color: white;
display: none;
padding: 50px;
text-align: center;
height: 100vh;
}
p {
display: flex;
position: absolute;
text-align: center;
align-items: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: black;
background: white;
padding: 15px;
border-radius: 2px;
}
span {
color: red;
padding: 5px;
}
#HTML {
background-color: rgb(243, 122, 122);
}
#CSS {
background-color: rgb(198, 237, 107);
}
#JAVASCRIPT {
background-color: rgb(51, 124, 249);
}
#react {
background-color: rgb(234, 215, 93);
}
</style>
Example.js
在 JavaScript 部分，我们尝试在用户点击相应的按钮时在选项卡之间切换。
<script>
function langName(name, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(name).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
完整示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Lato", sans-serif;
}
.tablink {
background-color: rgba(0, 0, 0, 0.5);
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content */
.tabcontent {
color: white;
display: none;
padding: 50px;
text-align: center;
height: 100vh;
}
p {
display: flex;
position: absolute;
text-align: center;
align-items: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: black;
background: white;
padding: 15px;
border-radius: 2px;
}
span {
color: red;
padding: 5px;
}
#HTML {
background-color: rgb(243, 122, 122);
}
#CSS {
background-color: rgb(198, 237, 107);
}
#JAVASCRIPT {
background-color: rgb(51, 124, 249);
}
#react {
background-color: rgb(234, 215, 93);
}
</style>
</head>
<body>
<button class="tablink" onclick="langName('HTML', this, 'rgb(243, 122, 122)')" id="defaultOpen"> HTML </button>
<button class="tablink" onclick="langName('CSS', this, 'rgb(198, 237, 107)')"> CSS </button>
<button class="tablink" onclick="langName('JAVASCRIPT', this, 'rgb(51, 124, 249)')"> JS </button>
<button class="tablink" onclick="langName('react', this, 'rgb(234, 215, 93)')">React</button>
<div id="HTML" class="tabcontent">
<h1>HTML</h1>
<p>This is <span> HTML</span></p>
</div>
<div id="CSS" class="tabcontent">
<h1>CSS</h1>
<p>This is <span> CSS</span></p>
</div>
<div id="JAVASCRIPT" class="tabcontent">
<h1>JAVASCRIPT</h1>
<p>This is <span> javascript </span></p>
</div>
<div id="react" class="tabcontent">
<h1>React</h1>
<p>This is <span> Reactjs</span></p>
</div>
<script>
function langName(name, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(name).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
更新于：2022-12-19
1K+ 阅读量
广告