如何使用 CSS 和 JavaScript 创建全页标签?
javascriptweb developmentfront end technology更新于 2024/6/15 4:55:00
在本文中，我们将讨论如何使用 CSS 和 JavaScript 创建全页标签。
全页标签，顾名思义，是显示在整个页面而不是某个部分的标签。
要创建全页标签，您需要将页面高度设置为 100%。您可以使用高度属性来执行此操作，即您需要创建一个 CSS 类，然后将高度设置为 100vh ，并将此类设置为您需要的具有全页长度的各个选项卡元素的样式类。
通过创建全页选项卡，我们可以更轻松地导航网页内容，您只需单击相应的标题即可移动到所需的页面。
创建全页选项卡的步骤
以下是使用 JavaScript 创建选项卡标题的步骤 -
定义一个具有三个参数的函数名称、元素和颜色。
声明变量tabcontent 并通过 document.getElementByClassName 将类名分配给tabcontent 变量。
迭代 for 循环，并使用样式属性 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 个不同的选项卡创建了 4 个 div 元素，并且创建了 4 个按钮，分别是 HTML、CSS、JS 和 React。
在每个按钮中，我们为 onclick 事件编写一个函数，该函数调用相应的 div 元素。
我们将样式 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>
