jQuery 實現 Tab 選單平滑滾動切換效果：完整代碼與原理解析

一款基於 jQuery 的 Tab 選單滾動切換特效：滑鼠懸停標籤時，底部指示條 (lava) 與內容面板 (panel) 同步平滑動畫滑動至對應位置，提升頁面互動質感。

完整 HTML/JS/CSS 代碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Tab 滾動切換</title>
<script src="jquery-1.3.2.js"></script>
<style>
body { font-family: arial; font-size: 12px; }
a { color: #333; text-decoration: none; display: block; }
a:hover { color: #888; }
#moving_tab { overflow: hidden; width: 300px; position: relative; border: 1px solid #ccc; margin: 0 auto; }
#moving_tab .tabs { position: relative; height: 30px; padding-top: 5px; cursor: default; }
#moving_tab .tabs .item { position: relative; z-index: 10; float: left; display: block; width: 150px; text-align: center; font-size: 14px; font-weight: 700; }
#moving_tab .tabs .lava { position: absolute; top: 0; left: 0; z-index: 0; width: 150px; height: 30px; background: #abe3eb; }
#moving_tab .content { position: relative; overflow: hidden; background: #abe3eb; border-top: 1px solid #d9fafa; }
#moving_tab .panel { position: relative; width: 600px; }
#moving_tab .panel ul { float: left; width: 300px; padding: 0; margin: 0; list-style: none; }
#moving_tab .panel ul li { padding: 5px 0 5px 10px; border-bottom: 1px dotted #fff; }
</style>
<script>
$(document).ready(function() {
    // 初始化 lava 位置到第一個標籤
    $('.lava').css({ left: $('span.item:first').position().left });

    $('.item').mouseover(function() {
        var pos = $(this).position().left;
        // lava 滑動
        $('.lava').stop().animate({ left: pos }, { duration: 200 });
        // panel 同步滑動 (寬度 2x，故位移 2x)
        $('.panel').stop().animate({ left: pos * -2 }, { duration: 200 });
    });
});
</script>
</head>
<body>
<div id="moving_tab">
    <div class="tabs">
        <div class="lava"></div>
        <span class="item">Popular Posts</span>
        <span class="item">Recent Posts</span>
    </div>
    <div class="content">
        <div class="panel">
            <ul>
                <li><a href='#'>Panel 01 Item 01</a></li>
                <li><a href='#'>Panel 01 Item 02</a></li>
                <li><a href='#'>Panel 01 Item 03</a></li>
                <li><a href='#'>Panel 01 Item 04</a></li>
                <li><a href='#'>Panel 01 Item 05</a></li>
            </ul>
            <ul>
                <li><a href='#'>Panel 02 Item 01</a></li>
                <li><a href='#'>Panel 02 Item 02</a></li>
                <li><a href='#'>Panel 02 Item 03</a></li>
                <li><a href='#'>Panel 02 Item 04</a></li>
                <li><a href='#'>Panel 02 Item 05</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

核心原理解析

1. 結構：.tabs 含指示條 .lava 與標籤 .item；.content 含 .panel，內部兩個 ul 並排 (總寬 600px = 2 × 300px)
2. 定位：.lava 絕對定位於 .tabs 內；.panel 相對定位，左右滑動顯示對應 ul
3. 動畫邏輯：mouseover 觸發 → 取得標籤 position().left → .lava 動畫至該位置 → .panel 動畫至 left * -2 (因寬度雙倍)
4. .stop()：防止快速移入產生動畫隊列堆疊

擴展建議

• 改用 click 事件支援行動裝置
• 增加鍵盤無障礙支援 (Tab/Enter 切換)
• 響應式寬度：用百分比或 JS 計算動態寬度
• 升級至 jQuery 3.x / 原生 CSS Transition 替代 animate()