仿淘寶 Tab 切換搜索框實現教學

想要打造類似淘寶首頁的多標籤搜索介面嗎？這篇教學將帶你了解如何實現一個可切換搜索類別的 Tab 搜索框。透過簡單的 HTML、CSS 與 JavaScript，即可讓使用者在「商品」、「店鋪」、「直播」等不同搜索模式間無縫切換，大幅提升使用者體驗。

核心邏輯與結構

整個元件主要包含三個部分：

• Tab 列表：顯示可切換的搜索分類（如綜合、商品、店鋪等）。
• 搜索輸入框：共用同一個輸入欄位，但根據目前選中的 Tab 改變提交目標或參數。
• 隱藏表單欄位：用於記錄目前選中的搜索類型，隨表單一起提交至後端。

當使用者點擊不同 Tab 時，JavaScript 會更新隱藏欄位的值，並切換 Tab 的視覺狀態（如高亮顯示），確保表單提交時能正確識別搜索範圍。

示例截圖

擴充應用

此模式不僅適用於電商搜索，也可延伸至內容管理系統的多欄位搜索、部落格的分類篩選等場景。建議搭配 AJAX 實現無刷新搜索，進一步優化互動體驗。