如何基于指定JSON使用HTML/CSS/JavaScript实现分类内容切换功能

直接上可直接运行的完整代码，完全匹配需求逻辑：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>分类切换</title>
    <style>
        .tab-btn {
            margin-right: 12px;
            padding: 6px 16px;
            cursor: pointer;
        }
        #content-area {
            margin-top: 20px;
        }
        .item {
            margin: 6px 0;
        }
    </style>
</head>
<body>
    <!-- 切换触发按钮 -->
    <button class="tab-btn" data-target="cars">cars</button>
    <button class="tab-btn" data-target="others">others</button>
    <!-- 内容展示区 -->
    <div id="content-area"></div>

    <script>
        // 内置给定的JSON数据，已修正原数据尾逗号兼容问题
        const categoryData = {
            "cars": {
                "items": ["small-vehicle","large-vehicle"],
                "color": "red"
            },
            "others": {
                "items": ["swimming pool","plane","ship"],
                "color": "blue"
            }
        }

        const contentArea = document.getElementById('content-area')
        const btns = document.querySelectorAll('.tab-btn')

        btns.forEach(btn => {
            btn.addEventListener('click', function() {
                // 获取当前点击对应的分类key
                const targetKey = this.dataset.target
                const currentData = categoryData[targetKey]
                // 清空之前的内容
                contentArea.innerHTML = ''
                // 遍历条目渲染
                currentData.items.forEach(itemText => {
                    const itemEl = document.createElement('div')
                    itemEl.className = 'item'
                    itemEl.textContent = itemText
                    itemEl.style.color = currentData.color
                    contentArea.appendChild(itemEl)
                })
            })
        })

        // 如果需要默认显示cars分类，取消下面这行注释即可
        // document.querySelector('[data-target="cars"]').click()
    </script>
</body>
</html>

逻辑说明 #

• 触发按钮用data-*属性绑定对应分类标识，后续如果新增分类不用修改核心逻辑，直接在JSON里加对应配置、增加对应带data-target的按钮即可
• 每次点击先清空内容区旧内容，再遍历当前分类的items生成条目，直接读取配置里的color值设置文字颜色，不需要硬编码颜色判断逻辑
• 已经修正了原JSON数据里others.items数组最后多余的尾逗号，避免低版本JS环境下解析报错

内容的提问来源于stack exchange，提问作者anonym