1. Tabs 部分

<div class="tabs">
    <div class="tab active" onclick="showTab('tab1')">Tab 1</div>
    <div class="tab" onclick="showTab('tab2')">Tab 2</div>
    <div class="tab" onclick="showTab('tab3')">Tab 3</div>
</div>

• <div class="tabs">: 这是包含所有Tab的容器。
• <div class="tab">: 每一个Tab都是一个<div>元素，具有tab类。active类表示当前选中的Tab。
• onclick="showTab('tab1')": 点击Tab时调用showTab函数，并传入对应的Tab ID（如tab1）。

2. 内容部分

<div id="tab1" class="content active">
    <h2>内容 1</h2>
    <p>这是第一个Tab的内容，样式更加美观。</p>
</div>

• <div id="tab1" class="content active">: 内容区域，与每个Tab对应。active类表示当前可见的内容。
• 每个Tab下有自己的内容，包含标题和段落。

3. CSS 样式

.tabs {
    display: flex;
    flex-direction: column; /* 手机端垂直排列 */
    border-bottom: 2px solid #007bff;
    margin-bottom: 10px;
    position: sticky;
    top: 0; /* 固定在顶部 */
    background-color: white; /* 背景色与内容一致 */
    z-index: 10; /* 确保在其他元素之上 */
}

• display: flex;: 使用Flexbox布局使Tabs可以轻松排列。
• flex-direction: column;: 在手机端，Tabs垂直排列；在大屏幕上会更改为水平排列。
• position: sticky; top: 0;: 使Tabs在页面滚动时固定在顶部。
• z-index: 10;: 确保Tabs在其他内容之上显示。

4. JavaScript 函数

function showTab(tabId) {
    const contents = document.querySelectorAll('.content');
    contents.forEach(content => content.classList.remove('active'));

    const tabs = document.querySelectorAll('.tab');
    tabs.forEach(tab => tab.classList.remove('active'));

    document.getElementById(tabId).classList.add('active');
    document.querySelector(`.tab[onclick="showTab('${tabId}')"]`).classList.add('active');
}

• function showTab(tabId): 定义了一个函数用于显示选中的Tab。
• document.querySelectorAll('.content'): 选择所有内容区域。
• contents.forEach(content => content.classList.remove('active'));: 隐藏所有内容区域，通过移除active类。
• tabs.forEach(tab => tab.classList.remove('active'));: 移除所有Tab的active类。
• document.getElementById(tabId).classList.add('active');: 显示选中的内容，通过添加active类。
• document.querySelector(.tab[onclick=”showTab(‘${tabId}’)”]).classList.add('active');: 确保选中的Tab也被标记为活动状态。

这段代码实现了一个具有三个Tab的界面，用户可以单击Tab以切换显示不同的内容。Tabs在页面滚动时固定在顶部，确保用户始终可以访问。通过Flexbox和CSS样式的组合，实现了良好的响应式设计。JavaScript用于处理Tab的切换逻辑，使内容展示更为动态。

HTML:

<div class="tabs">
    <div class="tab active" onclick="showTab('tab1')">Tab 1</div>
    <div class="tab" onclick="showTab('tab2')">Tab 2</div>
    <div class="tab" onclick="showTab('tab3')">Tab 3</div>
</div>

<div id="tab1" class="content active">
    <h2>内容 1</h2>
    <p>这是第一个Tab的内容，样式也很不错</p>
</div>
<div id="tab2" class="content">
    <h2>内容 2</h2>
    <p>这是第二个Tab的内容，样式也很不错。</p>
</div>
<div id="tab3" class="content">
    <h2>内容 3</h2>
    <p>这是第三个Tab的内容，展示更多信息。</p>
</div>

CSS:

 body {
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
            margin: 0;
            padding: 20px;
        }
        .tabs {
            display: flex;
            flex-direction: column; /* 手机端垂直排列 */
            border-bottom: 2px solid #007bff;
            margin-bottom: 10px;
            position: sticky;
            top: 0; /* 固定在顶部 */
            background-color: white; /* 背景色与内容一致 */
            z-index: 10; /* 确保在其他元素之上 */
        }
        .tab {
            padding: 15px 0;
            text-align: center;
            cursor: pointer;
            background-color: #ffffff;
            border: 1px solid #007bff;
            border-bottom: none;
            transition: background-color 0.3s;
        }
        .tab.active {
            background-color: #007bff;
            color: white;
            font-weight: bold;
        }
        .tab:hover {
            background-color: #e6f0ff;
        }
        .content {
            border: 1px solid #007bff;
            border-radius: 5px;
            padding: 20px;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            display: none;
            margin-top: -1px; /* 确保内容区与Tab无缝连接 */
        }
        .content.active {
            display: block;
        }
        @media (min-width: 600px) {
            .tabs {
                flex-direction: row; /* 大屏幕上水平排列 */
            }
            .tab {
                flex: 1; /* 三个Tab宽度相等 */
            }
        }

Javascript:

<script>
    function showTab(tabId) {
        // 隐藏所有内容
        const contents = document.querySelectorAll('.content');
        contents.forEach(content => content.classList.remove('active'));

        // 移除所有tab的active类
        const tabs = document.querySelectorAll('.tab');
        tabs.forEach(tab => tab.classList.remove('active'));

        // 显示选中的内容
        document.getElementById(tabId).classList.add('active');
        document.querySelector(`.tab[onclick="showTab('${tabId}')"]`).classList.add('active');
    }
</script>

</body>
</html>

演示