您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

JSP 中實現選項卡功能的完整指南

編輯：程式設計綜合問答

在 JSP 頁面中實現選項卡功能，可以讓用戶在同一頁面內切換不同的內容區塊，提升使用體驗。常見的做法是結合 HTML、CSS 與 JavaScript，或是使用成熟的前端庫（如 jQuery UI）來快速構建。

核心實現思路

選項卡的基本結構包含兩部分：標籤列表與對應的內容面板。點擊標籤時，透過 JavaScript 控制顯示對應面板、隱藏其他面板，並更新標籤的激活狀態。

使用 jQuery UI Tabs 快速構建

jQuery UI 提供了開箱即用的 Tabs 組件，只需引入相關資源並編寫簡單標記即可：

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<div id="tabs">
  <ul>
    <li><a href="#tab-1">選項一</a></li>
    <li><a href="#tab-2">選項二</a></li>
    <li><a href="#tab-3">選項三</a></li>
  </ul>
  <div id="tab-1"><p>第一個選項卡的內容</p></div>
  <div id="tab-2"><p>第二個選項卡的內容</p></div>
  <div id="tab-3"><p>第三個選項卡的內容</p></div>
</div>

<script>
  $(function() {
    $("#tabs").tabs();
  });
</script>

原生 JavaScript 實現（無依賴）

若不想引入額外庫，可自行編寫邏輯：

<div class="tab-container">
  <div class="tab-headers">
    <button class="tab-btn active" data-tab="panel1">面板一</button>
    <button class="tab-btn" data-tab="panel2">面板二</button>
    <button class="tab-btn" data-tab="panel3">面板三</button>
  </div>
  <div class="tab-panels">
    <div id="panel1" class="tab-panel active">內容一</div>
    <div id="panel2" class="tab-panel">內容二</div>
    <div id="panel3" class="tab-panel">內容三</div>
  </div>
</div>

<style>
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-btn.active { background: #007bff; color: #fff; }
</style>

<script>
document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById(btn.dataset.tab).classList.add('active');
  });
});
</script>

在 JSP 中整合動態數據

搭配 JSTL 或 EL 表達式，可將後端傳遞的列表數據動態渲染為選項卡：

<c:forEach items="${tabList}" var="tab" varStatus="status">
  <li><a href="#tab-${status.index}">${tab.title}</a></li>
</c:forEach>
<c:forEach items="${tabList}" var="tab" varStatus="status">
  <div id="tab-${status.index}">${tab.content}</div>
</c:forEach>