jquery实现tab切换完整代码

以下是一个使用jQuery实现Tab切换的完整示例代码：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab切换示例</title>
    <style>
        /* 基础样式 */
        body {
            font-family: Arial, sans-serif;
        }
        .tab-container {
            width: 60%;
            margin: 0 auto;
        }
        .tab-buttons {
            display: flex;
            justify-content: space-around;
        }
        .tab-button {
            padding: 10px 20px;
            cursor: pointer;
        }
        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #ccc;
        }
        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="tab-container">
        <div class="tab-buttons">
            <div class="tab-button active" data-tab="tab1">Tab 1</div>
            <div class="tab-button" data-tab="tab2">Tab 2</div>
            <div class="tab-button" data-tab="tab3">Tab 3</div>
        </div>
        <div id="tab1" class="tab-content active">
            <h2>内容1</h2>
            <p>这是第一个Tab的内容。</p>
        </div>
        <div id="tab2" class="tab-content">
            <h2>内容2</h2>
            <p>这是第二个Tab的内容。</p>
        </div>
        <div id="tab3" class="tab-content">
            <h2>内容3</h2>
            <p>这是第三个Tab的内容。</p>
        </div>
    </div>

    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入自定义的jQuery脚本 -->
    <script src="tab-switch.js"></script>
</body>
</html>

jQuery部分（tab-switch.js）

$(document).ready(function() {
    $('.tab-button').click(function() {
        var tabId = $(this).data('tab');

        // 移除所有按钮的active类，并隐藏所有内容
        $('.tab-button').removeClass('active');
        $('.tab-content').removeClass('active');

        // 添加当前按钮的active类，并显示对应的内容
        $(this).addClass('active');
        $('#' + tabId).addClass('active');
    });
});

解释

HTML部分:
- 创建了一个包含三个Tab按钮和三个Tab内容的结构。
- 每个Tab按钮都有一个data-tab属性，用于关联对应的Tab内容。
- 初始状态下，第一个Tab按钮和第一个Tab内容被标记为active。

CSS部分:
- 基础样式用于美化页面。
- .tab-content默认是隐藏的（display: none），当它有active类时才会显示（display: block）。
jQuery部分:
- 当点击某个Tab按钮时，首先移除所有按钮和内容的active类。
- 然后为当前点击的按钮和对应的内容添加active类，从而实现切换效果。