使用js写tab点击事件

当然，可以使用JavaScript来处理选项卡（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 Example</title>
    <style>
        .tab-container {
            display: flex;
            flex-direction: column;
            width: 300px;
        }
        .tab-buttons {
            display: flex;
            justify-content: space-around;
        }
        .tab-button {
            padding: 10px;
            cursor: pointer;
        }
        .tab-content {
            padding: 20px;
            border: 1px solid #ccc;
        }
        .active {
            background-color: #f0f0f0;
        }
    </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 class="tab-content active" id="tab1">
            Content for Tab 1
        </div>
        <div class="tab-content" id="tab2">
            Content for Tab 2
        </div>
        <div class="tab-content" id="tab3">
            Content for Tab 3
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabContents = document.querySelectorAll('.tab-content');

    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');

            // Remove active class from all buttons and contents
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabContents.forEach(content => content.classList.remove('active'));

            // Add active class to the clicked button and corresponding content
            this.classList.add('active');
            document.getElementById(targetTab).classList.add('active');
        });
    });
});

解释

HTML部分:
- 创建了一个包含选项卡按钮和内容的容器。
- 每个选项卡按钮都有一个data-tab属性，用于标识对应的内容区域。
- 初始状态下，第一个选项卡按钮和内容区域是激活状态（带有active类）。

CSS部分:
- 定义了选项卡按钮和内容区域的样式。
- active类用于高亮显示当前激活的选项卡按钮和内容区域。
JavaScript部分:
- 在文档加载完成后，为每个选项卡按钮添加点击事件监听器。
- 当点击某个选项卡按钮时，获取其data-tab属性值，以确定要显示的内容区域。
- 移除所有选项卡按钮和内容区域的active类，然后为点击的按钮和对应的内容区域添加active类。