jquery tab左右箭头

基础概念

jQuery Tab 是一种常见的网页交互组件，用于在一个有限的空间内展示多个内容面板，并通过标签页进行切换。左右箭头通常用于在标签页之间进行导航，尤其是在标签页数量较多时，提供快速切换的功能。

类型

静态标签页：内容在页面加载时一次性加载。
动态标签页：内容在用户切换标签页时动态加载，提高页面加载速度。

应用场景

产品展示页面
文章分类导航
设置页面的多选项卡

示例代码

以下是一个简单的 jQuery Tab 实现，包含左右箭头导航：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Tab with Arrows</title>
    <style>
        .tab-container {
            width: 600px;
            overflow: hidden;
        }
        .tab-header {
            display: flex;
            border-bottom: 1px solid #ccc;
        }
        .tab-header div {
            padding: 10px;
            cursor: pointer;
        }
        .tab-content {
            display: none;
            padding: 10px;
        }
        .active {
            background-color: #f0f0f0;
        }
        .arrow {
            cursor: pointer;
            padding: 10px;
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div class="tab-container">
        <div class="arrow left-arrow" id="left-arrow">←</div>
        <div class="tab-header">
            <div class="active">Tab 1</div>
            <div>Tab 2</div>
            <div>Tab 3</div>
            <div>Tab 4</div>
            <div>Tab 5</div>
        </div>
        <div class="arrow right-arrow" id="right-arrow">→</div>
        <div class="tab-content active">Content 1</div>
        <div class="tab-content">Content 2</div>
        <div class="tab-content">Content 3</div>
        <div class="tab-content">Content 4</div>
        <div class="tab-content">Content 5</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let currentIndex = 0;
            const tabHeaders = $('.tab-header div');
            const tabContents = $('.tab-content');

            function updateTabs() {
                tabHeaders.removeClass('active').eq(currentIndex).addClass('active');
                tabContents.hide().eq(currentIndex).show();
            }

            $('#left-arrow').click(function() {
                currentIndex = (currentIndex > 0) ? currentIndex - 1 : tabHeaders.length - 1;
                updateTabs();
            });

            $('#right-arrow').click(function() {
                currentIndex = (currentIndex < tabHeaders.length - 1) ? currentIndex + 1 : 0;
                updateTabs();
            });

            tabHeaders.click(function() {
                currentIndex = tabHeaders.index(this);
                updateTabs();
            });
        });
    </script>
</body>
</html>