資料結構
網路
關係型資料庫管理系統
作業系統
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+ 閱讀量
廣告