如何在HTML中从JSON渲染的侧边栏菜单选择项目详情？

我来帮你一步步搞定这个需求，核心分三步：搭建基础结构、渲染侧边栏菜单、绑定点击事件展示详情，下面是具体的代码示例和说明：

1. 基础HTML结构 #

先搭好页面的骨架，一个侧边栏容器放项目列表，一个区域展示选中的项目详情：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Project Dashboard</title>
    <style>
        /* 简单美化下布局，你可以根据需求调整 */
        .container {
            display: flex;
            gap: 20px;
            padding: 20px;
        }
        #project-sidebar {
            width: 250px;
            border-right: 1px solid #eee;
            padding-right: 20px;
        }
        .project-item {
            padding: 10px;
            margin-bottom: 8px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .project-item:hover {
            background-color: #f5f5f5;
        }
        .project-item.active {
            background-color: #e3f2fd;
        }
        #project-details {
            flex: 1;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 侧边栏项目菜单 -->
        <div id="project-sidebar">
            <h3>Projects</h3>
            <ul id="project-list" style="list-style: none; padding: 0;"></ul>
        </div>
        <!-- 项目详情展示区 -->
        <div id="project-details">
            <p>请选择一个项目查看详情</p>
        </div>
    </div>

    <script>
        // 你的项目JSON数据（真实场景下可以从接口获取）
        const projectData = {
            "projects": [
                {
                    "instances": null,
                    "name": "decodingideas",
                    "projectid": "decodingideas-147616",
                    "projectnumber": 334691107943,
                    "orgid": "",
                    "orgname": "",
                    "parentid": "",
                    "parenttype": ""
                },
                {
                    "instances": null,
                    "name": "pupil-workers",
                    "projectid": "pupil-workers",
                    "projectnumber": 455648594684,
                    "orgid": "",
                    "orgname": "",
                    "parentid": "",
                    "parenttype": ""
                }
                // 更多项目...
            ]
        };

        // 2. 渲染侧边栏菜单
        function renderProjectMenu() {
            const projectList = document.getElementById('project-list');
            projectData.projects.forEach(project => {
                const listItem = document.createElement('li');
                listItem.className = 'project-item';
                listItem.textContent = project.name;
                // 绑定点击事件，传递当前项目数据
                listItem.addEventListener('click', () => showProjectDetails(project));
                projectList.appendChild(listItem);
            });
        }

        // 3. 展示项目详情
        function showProjectDetails(project) {
            // 移除所有菜单项的active状态
            document.querySelectorAll('.project-item').forEach(item => {
                item.classList.remove('active');
            });
            // 给当前点击的菜单项加active状态
            event.target.classList.add('active');

            // 渲染详情内容
            const detailsContainer = document.getElementById('project-details');
            detailsContainer.innerHTML = `
                <h2>${project.name}</h2>
                <div style="line-height: 1.8;">
                    <p><strong>项目ID:</strong> ${project.projectid}</p>
                    <p><strong>项目编号:</strong> ${project.projectnumber}</p>
                    <p><strong>组织ID:</strong> ${project.orgid || '无'}</p>
                    <p><strong>组织名称:</strong> ${project.orgname || '无'}</p>
                    <p><strong>父级ID:</strong> ${project.parentid || '无'}</p>
                    <p><strong>父级类型:</strong> ${project.parenttype || '无'}</p>
                </div>
            `;
        }

        // 页面加载完成后渲染菜单
        window.addEventListener('DOMContentLoaded', renderProjectMenu);
    </script>
</body>
</html>

关键说明： #

• 数据来源：上面用的是模拟的projectData，真实场景下你可以用fetch从接口获取JSON，比如：

  fetch('/your-api-endpoint/projects')
    .then(res => res.json())
    .then(data => {
        projectData = data;
        renderProjectMenu();
    })
    .catch(err => console.error('加载项目数据失败:', err));
  

• 交互逻辑：点击菜单项时，先移除其他项的选中状态，给当前项加高亮，然后把项目的各个字段渲染到详情区。
• 样式自定义：CSS部分是基础布局，你可以根据自己的需求调整颜色、间距、排版等。

这样就能实现你要的侧边栏选择项目查看详情的功能啦！

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