<div>頁簽是一種常見的網頁設計元素，用于實現網頁內容的切換。通過使用<div>標簽和CSS樣式，開發者可以創建一個交互式的頁面，使用戶能夠快速切換不同的內容。下面是一些示例代碼，用于解釋和說明<div>頁簽的使用方法。
<div>頁簽的基本結構如下所示：
在上面的代碼中，我們使用<div>標簽創建了一個名為"tab"的容器，其中包含了三個<button>元素，分別用于切換到不同的標簽。每個<button>元素都有一個對應的onclick事件，用于調用JavaScript函數openTab()并傳遞參數event和相應的標簽名。這些參數將在函數中用于切換顯示的內容。
下面是openTab()函數的示例代碼：
在這個函數中，我們通過document.getElementsByClassName()方法獲取了所有具有"tabcontent"和"tablinks"類名的元素，并將它們存儲在變量tabcontent和tablinks中。然后我們通過一個循環，將所有的"tabcontent"元素的display樣式設置為"none"，從而隱藏它們。接下來，我們刪除所有"tablinks"元素上的"active"類名，以便去掉原來選中的按鈕效果。然后，我們通過document.getElementById()方法獲取要顯示的標簽內容，并設置其display樣式為"block"，從而顯示它。最后，我們在當前的按鈕上添加一個名為"active"的類名，以突出顯示當前選中的按鈕。
下面是一個完整的例子，用于展示<div>頁簽的使用效果：
在上述例子中，我們通過內聯CSS樣式定義了頁簽、按鈕和內容的樣式。在頁簽容器內部，我們使用了三個<button>元素作為按鈕，用于切換到相應的標簽。每個標簽內容都是一個<div>元素，并通過給其中一個<div>元素添加"displayed"類名來指定默認顯示的標簽。
通過使用上述的代碼，開發者可以輕松地創建一個具有交互性和切換效果的頁簽頁面。用戶可以通過點擊不同的按鈕來切換不同的內容，從而提供更好的用戶體驗。
<div>頁簽的基本結構如下所示：
<div class="tab"> <button class="tablinks" onclick="openTab(event, 'Tab1')">Tab 1</button> <button class="tablinks" onclick="openTab(event, 'Tab2')">Tab 2</button> <button class="tablinks" onclick="openTab(event, 'Tab3')">Tab 3</button> </div>
在上面的代碼中，我們使用<div>標簽創建了一個名為"tab"的容器，其中包含了三個<button>元素，分別用于切換到不同的標簽。每個<button>元素都有一個對應的onclick事件，用于調用JavaScript函數openTab()并傳遞參數event和相應的標簽名。這些參數將在函數中用于切換顯示的內容。
下面是openTab()函數的示例代碼：
function openTab(event, tabName) {
// 獲取所有具有"tabcontent"類名的元素
var tabcontent = document.getElementsByClassName("tabcontent");
<br>
// 隱藏所有的"tabcontent"元素
for (var i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
<br>
// 獲取所有具有"tablinks"類名的元素
var tablinks = document.getElementsByClassName("tablinks");
<br>
// 刪除所有"tablinks"元素上的"active"類名
for (var i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
<br>
// 顯示選定的標簽內容
document.getElementById(tabName).style.display = "block";
<br>
// 添加活動類到當前的按鈕
event.currentTarget.className += " active";
}在這個函數中，我們通過document.getElementsByClassName()方法獲取了所有具有"tabcontent"和"tablinks"類名的元素，并將它們存儲在變量tabcontent和tablinks中。然后我們通過一個循環，將所有的"tabcontent"元素的display樣式設置為"none"，從而隱藏它們。接下來，我們刪除所有"tablinks"元素上的"active"類名，以便去掉原來選中的按鈕效果。然后，我們通過document.getElementById()方法獲取要顯示的標簽內容，并設置其display樣式為"block"，從而顯示它。最后，我們在當前的按鈕上添加一個名為"active"的類名，以突出顯示當前選中的按鈕。
下面是一個完整的例子，用于展示<div>頁簽的使用效果：
<!DOCTYPE html>
<html>
<head>
<style>
/* 定義頁簽樣式 */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
<br>
/* 定義頁簽按鈕樣式 */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
<br>
/* 當頁簽按鈕被點擊時，添加活動類樣式 */
.tab button.active {
background-color: #ccc;
}
<br>
/* 定義頁簽內容樣式 */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<br>
/* 當標簽內容被顯示時，調整顯示樣式 */
.tabcontent.displayed {
display: block;
}
</style>
</head>
<body>
<br>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Tab1')">Tab 1</button>
<button class="tablinks" onclick="openTab(event, 'Tab2')">Tab 2</button>
<button class="tablinks" onclick="openTab(event, 'Tab3')">Tab 3</button>
</div>
<br>
<div id="Tab1" class="tabcontent displayed">
<h3>Tab 1 Content</h3>
<p>This is the content of tab 1.</p>
</div>
<br>
<div id="Tab2" class="tabcontent">
<h3>Tab 2 Content</h3>
<p>This is the content of tab 2.</p>
</div>
<br>
<div id="Tab3" class="tabcontent">
<h3>Tab 3 Content</h3>
<p>This is the content of tab 3.</p>
</div>
<br>
<script>
function openTab(event, tabName) {
var tabcontent = document.getElementsByClassName("tabcontent");
for (var i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
var tablinks = document.getElementsByClassName("tablinks");
for (var i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
event.currentTarget.className += " active";
}
</script>
<br>
</body>
</html>在上述例子中，我們通過內聯CSS樣式定義了頁簽、按鈕和內容的樣式。在頁簽容器內部，我們使用了三個<button>元素作為按鈕，用于切換到相應的標簽。每個標簽內容都是一個<div>元素，并通過給其中一個<div>元素添加"displayed"類名來指定默認顯示的標簽。
通過使用上述的代碼，開發者可以輕松地創建一個具有交互性和切換效果的頁簽頁面。用戶可以通過點擊不同的按鈕來切換不同的內容，從而提供更好的用戶體驗。
上一篇css文字居上代碼