這是 JavaScript 頁籤 A
使用原生 JS 控制顯示／隱藏。
如果這個頁籤失效，通常是 JS 被其他外掛的腳本衝突或錯誤中斷。
這是 JavaScript 頁籤 B
點擊上方按鈕應該要能正常切換。
這是 JavaScript 頁籤 C
測試時請同時在這附近放幾個 Enlighter 程式碼區塊。
document.addEventListener('DOMContentLoaded', function () { const buttons = document.querySelectorAll('.tabs-js .tab-btn'); const panels = document.querySelectorAll('.tabs-js .tab-panel');
buttons.forEach(function (btn) { btn.addEventListener('click', function () { // 移除所有 active buttons.forEach(b => b.classList.remove('active')); panels.forEach(p => p.classList.remove('active'));
// 加上目前點擊的 btn.classList.add('active'); const target = document.getElementById(btn.dataset.tab); if (target) target.classList.add('active'); }); }); });
.tabs-js {
max-width: 720px;
margin: 40px auto;
font-family: system-ui, sans-serif;
}
.tabs-js .tab-buttons {
display: flex;
gap: 4px;
}
.tabs-js .tab-btn {
flex: 1;
padding: 12px 16px;
background: #f0f0f0;
border: 3px solid #0a0a0a;
border-bottom: none;
border-radius: 8px 8px 0 0;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
.tabs-js .tab-btn.active {
background: #3d5afe;
color: #fff;
}
.tabs-js .tab-panel {
display: none;
padding: 24px;
border: 3px solid #0a0a0a;
border-radius: 0 0 8px 8px;
background: #fff8e7;
box-shadow: 6px 6px 0 #0a0a0a;
}
.tabs-js .tab-panel.active {
display: block;
}
這是 JavaScript 頁籤 A
使用原生 JS 控制顯示／隱藏。
如果這個頁籤失效，通常是 JS 被其他外掛的腳本衝突或錯誤中斷。
這是 JavaScript 頁籤 B
點擊上方按鈕應該要能正常切換。
這是 JavaScript 頁籤 C
測試時請同時在這附近放幾個 Enlighter 程式碼區塊。
document.addEventListener('DOMContentLoaded', function () {
const buttons = document.querySelectorAll('.tabs-js .tab-btn');
const panels = document.querySelectorAll('.tabs-js .tab-panel');
buttons.forEach(function (btn) {
btn.addEventListener('click', function () {
// 移除所有 active
buttons.forEach(b => b.classList.remove('active'));
panels.forEach(p => p.classList.remove('active'));
// 加上目前點擊的
btn.classList.add('active');
const target = document.getElementById(btn.dataset.tab);
if (target) target.classList.add('active');
});
});
});
列印本文 [1]