曜輝工作室的網站設計費用大概多少？

在客戶簡報最後一頁，對方突然問：「能不能讓首頁的某個按鈕點下去，直接跳到服務頁的第三個分頁？」你腦袋快速掃過 Elementor 的設定面板——分頁元件只讓你設預設開啟第一個、第二個、第三個，卻沒有哪個選項叫做「接收網址參數自動切換」。你只能笑著說「我試試看」，然後開始思考怎麼用一小段程式碼打通這條隱藏路徑。

這個需求比想像中更常出現：Landing Page 的不同方案對照、商品規格切換、活動梯次公告，全都塞在 tab 裡。行銷團隊需要從廣告或 EDM 直接帶使用者進到對應的那一頁——而不是每次都要附上一句「請手動點選第三個頁籤」。

內容導覽

Elementor Tab 的先天限制：為什麼原生做不到

Elementor 的「分頁」元件（Tabs widget）在前端渲染時，依賴內部的 data-tab-index 屬性來標記每一個頁籤按鈕，而切換行為完全由點擊事件驅動。原生設定只允許你預設「頁籤 1 預設開啟」、「頁籤 2 預設開啟」……但這只是「頁面載入後停在那一頁」，不是「根據網址動態決定要開哪一頁」。

換句話說，URL 上的 ?tab=3 或 #e-n-tab-title-xxxxx 對 Elementor 來說是完全陌生的東西。除非我們手動補一段 JS，在頁面就緒後去解析網址、找到按鈕、觸發點擊。

💡 雙重方案同時涵蓋兩種傳參情境

• 方案 1（?tab=3）：適合從外部系統、廣告後台、EDM 帶參數進來，簡潔又不怕 Elementor 改版換錨點 ID
• 方案 2（#e-n-tab-title-xxx）：Elementor 內建的錨點機制，適合頁內目錄錨點或不需要改 URL 結構的情境

解決方案核心：一段 JS 拆解兩種傳參路徑

下方這段程式碼會做三件事：

• 偵測 URL 查詢參數：抓取 ?tab= 後面的數字，對應到 data-tab-index
• 偵測錨點 hash：檢查網址是否帶有 Elementor tab 按鈕的 ID，例如 #e-n-tab-title-1234567
• 強制觸發點擊 + 平滑滾動：找到目標按鈕後，模擬點擊並將畫面捲到 tab 區塊的適當位置

<script>
(function($) {
  'use strict';

  function switchToTab() {
    // 方案 1: 檢查 URL 參數 ?tab=3
    const urlParams = new URLSearchParams(window.location.search);
    const tabIndex = urlParams.get('tab');

    if (tabIndex) {
      console.log('嘗試切換到 tab:', tabIndex);
      const $targetTab = $('.e-n-tab-title[data-tab-index="' + tabIndex + '"]');

      if ($targetTab.length > 0) {
        console.log('找到 tab 元素');
        $targetTab[0].click();

        setTimeout(function() {
          $('html, body').animate({
            scrollTop: $targetTab.offset().top - 100
          }, 300);
        }, 100);
      } else {
        console.log('找不到 tab 元素');
      }
    }

    // 方案 2: 檢查錨點 #e-n-tab-title-xxx
    if (window.location.hash) {
      const hash = window.location.hash;
      console.log('檢測到錨點:', hash);

      const $tabButton = $(hash);
      if ($tabButton.length && $tabButton.hasClass('e-n-tab-title')) {
        console.log('找到錨點對應的 tab');
        $tabButton[0].click();
      }
    }
  }

  // 多重時機點執行，確保 DOM 完全就緒
  $(document).ready(function() {
    console.log('Document ready');
    setTimeout(switchToTab, 100);
    setTimeout(switchToTab, 500);
    setTimeout(switchToTab, 1000);
  });

  $(window).on('load', function() {
    console.log('Window loaded');
    setTimeout(switchToTab, 100);
    setTimeout(switchToTab, 500);
  });

  $(window).on('elementor/frontend/init', function() {
    console.log('Elementor initialized');
    setTimeout(switchToTab, 100);
  });

})(jQuery);
</script>

把這段程式碼放到頁面中任何可以執行 JS 的位置即可。如果用 Elementor 內建的 HTML 元件嵌入，記得要包在 <script> 標籤裡。如果是透過佈景主題的 footer.php 或客製化外掛載入，可以直接引用函式部分。

為什麼要在多個生命週期重複觸發？

如果你只綁在 $(document).ready() 上，有可能 Elementor 的 tab 元件還沒在前端完全建構完畢。Elementor 使用自有的前端載入機制，tab 的 DOM 結構可能在 document ready 之後才由 JavaScript 動態產生。因此這段程式碼刻意在三個時間點各自用 setTimeout 重試：

• document ready：DOM 基本解析完成，多數元素已可選取
• window load：所有靜態資源（圖片、CSS、JS）載入完畢
• elementor/frontend/init：Elementor 內部的自訂事件，表示編輯器前端邏輯已初始化（前台瀏覽時也會觸發）

這個「多段式保險」的設計思維，來自實際開發中反覆遇到 tab 按鈕抓不到的狀況。與其賭單一事件百分之百命中，不如用低成本的多次重試來把成功率拉到近乎滿分。

踩坑提醒與實務開發建議

下面四點是在多個專案中反覆驗證後，整理出來最實際的踩坑心得。每個坑都曾經卡住至少一個下午，值得先花五分鐘讀完再動手。

一、`data-tab-index` 是字串，不是數字

CSS 屬性選擇器比對的是 HTML 屬性的原始值，也就是字串。如果你的 tab 索引從後端或其他邏輯產生，務必確保傳入的參數型態一致。用 "3" 而不是 3，否則 [data-tab-index="3"] 選擇器會失效。

二、Elementor 版本差異影響 class 名稱

這段程式碼仰賴 .e-n-tab-title 這個 CSS class。它是 Elementor 新版容器結構下的命名（約從 3.x 後期開始）。如果你的網站使用較舊的版本，或是主題強制載入了不同版本的 assets，請用瀏覽器開發者工具檢查 tab 按鈕實際使用的 class 並對應修改。

三、頁面內有多組 tab 時的潛在衝突

當同一個頁面有多組 Elementor Tabs 元件時，data-tab-index 可能重複。此時單靠索引數字不夠精確，建議在選擇器中加入父層容器 ID 來限定範圍，例如 $('#my-tab-section .e-n-tab-title[data-tab-index="' + tabIndex + '"]')。