实现一个简单的标签页 (Tabs)

推荐答案

-- -------------------- ---- -------
--------- -----
----- ----------
------
    ----- ----------------
    ----- --------------- ---------------------------- -------------------
    ------------- ------------
    -------
        ----- -
            -------- -----
            -------------- --- ----- -----
        -
        ---- -
            -------- ---- -----
            ------- --------
            ------- --- ----- -----
            -------------- -----
            ----------------- --------
            ------------- ----
        -
        ----------- -
            ----------------- -----
            -------------- --- ----- -----
        -
        ------------ -
            -------- -----
            ------- --- ----- -----
            ----------- -----
        -
        -------- -
            -------- -----
        -
        --------------- -
            -------- ------
        -
    --------
-------
------

---- -------------
    ---- ---------- ------- ------------------- -------
    ---- ----------- ------------------- -------
    ---- ----------- ------------------- -------
------

---- --------------------
    ---- -------------- ------- ----------------- --- --- -------
    ---- --------------- ----------------- --- --- -------
    ---- --------------- ----------------- --- --- -------
------

--------
    ----- ---- - ----------------------------------
    ----- -------- - --------------------------------------

    ---------------- -- -
        ----------------------------- -- -- -
            -- ------ ------ ----- ---- --- ---- --- --------
            -------------- -- ------------------------------
            ------------------ -- ------------------------------

            -- --- ------ ----- -- --- ------- --- --- ------------- -------
            ----------------------------
            ----- ----- - -----------------------------
            -------------------------------------------------------
        ---
    ---
---------

-------
-------

本题详细解读

1. HTML 结构

• Tabs 容器：.tabs 是一个包含所有标签的容器，每个标签是一个 .tab 元素。
• Tab 内容容器：.tab-content 是一个包含所有内容区域的容器，每个内容区域是一个 .content 元素。

2. CSS 样式

• Tabs 样式：.tab 是每个标签的样式，.tab.active 是当前激活标签的样式。
• Content 样式：.content 是每个内容区域的样式，.content.active 是当前激活内容区域的样式。

3. JavaScript 逻辑

• 事件监听：为每个 .tab 元素添加点击事件监听器。
• 切换逻辑：当点击某个标签时，移除所有标签和内容区域的 active 类，然后为当前点击的标签和对应的内容区域添加 active 类。

4. 数据绑定

• data-tab 属性：每个 .tab 元素都有一个 data-tab 属性，用于绑定对应的内容区域。通过 getAttribute('data-tab') 获取对应的内容区域的 id，从而实现标签与内容的联动。

5. 交互效果

• 点击切换：点击不同的标签时，对应的内容区域会显示，其他内容区域会隐藏。

通过以上代码，实现了一个简单的标签页功能，用户可以点击不同的标签来切换显示不同的内容。