Web 頁面跳轉：從 B 頁按鈕跳轉至 A 頁指定 Tab 內容的實現方案

核心思路

通過 URL 參數傳遞目標 Tab 標識，A 頁加載時解析參數並激活對應 Tab。這是無狀態 Web 環境下實現跨頁面定位的標準模式。

完整實現步驟

1. B 頁：構建帶參數的鏈接

<a href="a.html?tab=tab3">跳轉至 A 頁 Tab 3</a>
<!-- 或按鈕點擊事件 -->
<button onclick="location.href='a.html?tab=tab3'">去 Tab 3</button>

2. A 頁：解析參數並激活 Tab

<script>
// 通用 URL 參數解析函數
function getUrlParam(name) {
    const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
    const match = window.location.search.substr(1).match(reg);
    return match ? decodeURIComponent(match[2]) : null;
}

// 頁面加載完成後執行
document.addEventListener('DOMContentLoaded', function() {
    const targetTab = getUrlParam('tab');
    if (targetTab) {
        // 根據你的 Tab 組件 API 激活對應 Tab
        // 示例：Bootstrap 5
        // const tabEl = document.querySelector('#' + targetTab);
        // if (tabEl) new bootstrap.Tab(tabEl).show();

        // 示例：jQuery UI Tabs
        // $('#tabs').tabs('option', 'active', $('#' + targetTab).index());

        // 示例：原生實現（假設 Tab 結構）
        // document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
        // document.getElementById(targetTab).classList.add('active');
        // document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        // document.querySelector('[data-tab="' + targetTab + '"]').classList.add('active');

        console.log('激活 Tab:', targetTab);
    }
});
</script>

進階場景處理

多參數傳遞

// B 頁
location.href = `a.html?tab=tab3&scrollTo=section2&highlight=id123`;

// A 頁
const params = new URLSearchParams(window.location.search);
const tab = params.get('tab');
const scrollTo = params.get('scrollTo');
const highlight = params.get('highlight');
// 依次處理各參數...

歷史管理與瀏覽器後退

若使用 SPA 框架（Vue/React/Angular），建議使用路由系統：

• Vue Router: this.$router.push({ path: '/a', query: { tab: 'tab3' } })
• React Router: navigate('/a?tab=tab3')
• Angular: this.router.navigate(['/a'], { queryParams: { tab: 'tab3' } })

路由模式天然支持瀏覽器前進後退、書籤收藏、SEO 友好。

Tab 狀態持久化

結合 localStorage 或 sessionStorage 記住用戶最後訪問的 Tab：

// 激活 Tab 時保存
localStorage.setItem('lastActiveTab', targetTab);

// 頁面加載時恢復（無 URL 參數時）
const savedTab = localStorage.getItem('lastActiveTab');
if (!targetTab && savedTab) activateTab(savedTab);

常見坑點與解決

總結

「URL 參數傳遞 + 頁面加載解析 + 組件 API 激活」是跨頁面定位 Tab 的通用最佳實踐。配合現代前端路由系統、狀態持久化，可構建體驗流暢、可分享、可收藏的 Tab 導航體系。