在 HTML 頁面設計中，經常需要使用標簽切換來實現頁面內容的展示效果。下面，我們來看一下 HTML 頁面標簽切換的相關代碼。
<!DOCTYPE html>
<html>
<head>
<title>頁面標題</title>
<style>
/* 定義標簽切換樣式 */
.tab-content {
display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<!-- 點擊標簽切換對應內容 -->
<div class="tab">
<button class="tab-btn" onclick="showContent(0)">標簽1</button>
<button class="tab-btn" onclick="showContent(1)">標簽2</button>
<button class="tab-btn" onclick="showContent(2)">標簽3</button>
</div>
<!-- 顯示對應內容 -->
<div class="tab-container">
<div class="tab-content active">
<p>標簽1的內容...</p>
</div>
<div class="tab-content">
<p>標簽2的內容...</p>
</div>
<div class="tab-content">
<p>標簽3的內容...</p>
</div>
</div>
<!-- JavaScript 代碼實現標簽切換 -->
<script>
function showContent(index) {
var i, tabContent, tabBtn;
tabContent = document.getElementsByClassName("tab-content");
tabBtn = document.getElementsByClassName("tab-btn");
// 隱藏所有內容
for (i = 0; i< tabContent.length; i++) {
tabContent[i].style.display = "none";
}
// 取消選中狀態
for (i = 0; i< tabBtn.length; i++) {
tabBtn[i].className = tabBtn[i].className.replace(" active", "");
}
// 顯示當前內容
tabContent[index].style.display = "block";
// 將當前按鈕設為選中狀態
tabBtn[index].className += " active";
}
</script>
</body>
</html>在代碼中，首先定義了標簽切換樣式，使用 CSS 的 display 屬性控制內容顯隱。然后，在 HTML 中添加了標簽按鈕和對應的內容容器。JavaScript 代碼實現標簽切換時，通過獲取標簽按鈕和標簽內容的類名，然后控制它們的樣式，實現標簽按鈕與內容的對應切換。
上一篇mysql乘方