本文介绍一种基于 php + html + javascript 的左右分栏式用户详情展示方案：左侧列表渲染用户缩略信息，右侧容器根据点击事件动态显示对应用户的完整数据，避免重复请求与页面重载。
本文介绍一种基于 php + html + javascript 的左右分栏式用户详情展示方案：左侧列表渲染用户缩略信息，右侧容器根据点击事件动态显示对应用户的完整数据，避免重复请求与页面重载。
在构建管理后台或 CRM 类系统时，常见的「左列表–右详情」布局（如联系人面板、投资者档案页）需兼顾性能与用户体验。核心挑战在于：如何让右侧详情区响应左侧任意用户的点击，并精准匹配、高亮、展示其专属数据？ 本教程提供一套轻量、可维护、无框架依赖的实现思路。
✅ 核心设计思路
不推荐将右侧详情区域硬编码为单个静态模板（如原问题中仅写死一个
），而应采用 服务端预渲染 + 前端条件显隐 的组合策略：
- 服务端：在右侧容器内，使用与左侧完全一致的 while 循环，为每一个用户生成一份结构相同的详情区块，并统一添加 data-user-id="" 属性；
- 前端：通过 JavaScript 监听左侧用户项的点击事件，提取 data-user-id，再查找右侧对应 data-user-id 的 .chat-list 元素，将其设为 active-chat 并显示，同时隐藏其他详情块。
这样既避免了 AJAX 异步请求带来的延迟与复杂状态管理，又保证了 SEO 友好性与首屏加载完整性。
✅ 实现步骤与代码示例
1. 左侧用户列表（保持不变，仅增强语义）
确保每个 标签携带唯一且可识别的 data-user-id：
<li>
<a href="javascript:void(0)"
class="px-4 py-3 bg-hover-light-black d-flex align-items-center chat-user bg-light"
data-user-id="<?php echo htmlspecialchars($row['inv_id']); ?>">
<span class="position-relative">
<img src="assets/dist/images/profile/user-4.jpg" alt="user" style="max-width:90%" style="max-width:90%" class="rounded-circle">
</span>
<div class="ms-6 d-inline-block w-75">
<h6 class="mb-1 fw-semibold chat-title"><?php echo htmlspecialchars($inv['full_name']); ?></h6>
<span class="fs-2 text-body-color d-block">
<?php echo htmlspecialchars($inv['mobile']); ?>,
<?php echo htmlspecialchars($inv['userEmail']); ?>
</span>
</div>
</a>
</li>✅ 注意：使用 htmlspecialchars() 防止 XSS，尤其当字段可能含 HTML 或特殊字符时。
2. 右侧详情容器（关键改造点）
将原静态单块结构，替换为循环生成所有用户详情块，每块独立封装、默认隐藏：
<div class="chat-box p-9" style="height: calc(100vh - 428px)" data-simplebar="">
<?php
// 复用相同查询逻辑（注意：生产环境建议提取为函数或使用 prepared statement 防注入）
$InvMeta = mysqli_query($con, "SELECT * FROM investors_meta ORDER BY 1 DESC");
if ($_SESSION['useradmin'] === 'Investor') {
$InvMeta = mysqli_query($con, "SELECT * FROM investors_meta WHERE inv_id = " . (int)$_SESSION['uid'] . " ORDER BY 1 DESC");
}
while ($row = mysqli_fetch_assoc($InvMeta)) {
$FetchInvData = mysqli_query($con, "SELECT * FROM users WHERE userId = " . (int)$row['inv_id']);
$inv = mysqli_fetch_assoc($FetchInvData);
if (!$inv) continue; // 跳过无关联用户数据的记录
?>
<div class="chat-list chat" data-user-id="<?php echo (int)$row['inv_id']; ?>">
<div class="hstack align-items-start mb-7 pb-1 justify-content-between">
<div class="d-flex align-items-center gap-3">
<img src="assets/dist/images/profile/user-4.jpg" alt="user" style="max-width:90%" style="max-width:90%" class="rounded-circle">
<div>
<h6 class="fw-semibold fs-4 mb-0"><?php echo htmlspecialchars($inv['full_name']); ?></h6>
<p class="mb-0">— <?php echo htmlspecialchars($inv['role'] ?? 'N/A'); ?></p>
<p class="mb-0">— <?php echo htmlspecialchars($inv['company'] ?? 'N/A'); ?></p>
</div>
</div>
</div>
<div class="row">
<div class="col-4 mb-7">
<p class="mb-1 fs-2">Phone</p>
<h6 class="fw-semibold mb-0"><?php echo htmlspecialchars($inv['mobile'] ?? '-'); ?></h6>
</div>
<div class="col-8 mb-7">
<p class="mb-1 fs-2">Email</p>
<h6 class="fw-semibold mb-0">
<a href="mailto:<?php echo htmlspecialchars($inv['userEmail']); ?>">
<?php echo htmlspecialchars($inv['userEmail']); ?>
</a>
</h6>
</div>
<div class="col-12 mb-9">
<p class="mb-1 fs-2">Address</p>
<h6 class="fw-semibold mb-0"><?php echo htmlspecialchars($inv['address'] ?? '-'); ?></h6>
</div>
<!-- 更多字段依此类推 -->
</div>
<div class="border-bottom pb-7 mb-4">
<p class="mb-2 fs-2">Notes</p>
<p class="mb-3 text-dark"><?php echo nl2br(htmlspecialchars($inv['notes'] ?? '')); ?></p>
</div>
<div class="d-flex align-items-center gap-2">
<button class="btn btn-primary fs-2 edit-btn" data-id="<?php echo (int)$row['inv_id']; ?>">Edit</button>
<button class="btn btn-danger fs-2 delete-btn" data-id="<?php echo (int)$row['inv_id']; ?>">Delete</button>
</div>
</div>
<?php } ?>
</div>✅ 关键点：
- 所有 .chat-list 初始无 active-chat 类（由 JS 控制）；
- 每个块的 data-user-id 与左侧严格一致（类型转换 (int) 提升健壮性）；
- 字段输出均做 htmlspecialchars() 和空值兜底处理，保障安全与稳定性。
3. 前端交互逻辑（JavaScript）
在页面底部或独立 JS 文件中加入以下脚本：
<script>
document.addEventListener('DOMContentLoaded', function () {
// 缓存 DOM 元素
const userLinks = document.querySelectorAll('.chat-user[data-user-id]');
const chatLists = document.querySelectorAll('.chat-list[data-user-id]');
// 点击左侧用户触发详情切换
userLinks.forEach(link => {
link.addEventListener('click', function () {
const targetId = this.getAttribute('data-user-id');
if (!targetId) return;
// 移除所有 active 状态
chatLists.forEach(el => el.classList.remove('active-chat'));
// 显示目标详情块
const targetChat = Array.from(chatLists).find(
el => el.getAttribute('data-user-id') === targetId
);
if (targetChat) {
targetChat.classList.add('active-chat');
}
});
});
// 初始化：默认显示第一个用户（可选）
if (chatLists.length > 0 && !chatLists[0].classList.contains('active-chat')) {
chatLists[0].classList.add('active-chat');
}
});
</script>✅ 补充说明：
- 使用 DOMContentLoaded 确保 DOM 加载完成后再绑定事件；
- Array.from().find() 兼容性良好（IE11+），如需支持更老浏览器可用 for 循环；
- active-chat 类应定义 CSS display: block（其余默认 display: none），例如：
.chat-list { display: none; } .chat-list.active-chat { display: block; }
⚠️ 注意事项与最佳实践
- SQL 安全：示例中直接拼接 $_SESSION['uid'] 存在风险，务必改用预处理语句（PDO/MySQLi prepared statements） 替代字符串拼接；
- 性能考量：若用户量极大（>500），服务端一次性渲染全部详情可能影响首屏速度，此时建议改用「懒加载 + AJAX」模式；
- 样式隔离：确保 .chat-list 默认隐藏（display: none），且 active-chat 能正确覆盖；
- 无障碍支持：为 .chat-user 添加 role="button" 与 tabindex="0"，并监听 Enter/Space 键以支持键盘操作；
- 移动端适配：在小屏幕下，可结合 Bootstrap 的 d-none d-lg-block 隐藏左侧列表，点击返回按钮恢复，提升体验。
✅ 总结
本文所呈现的方案，以最小侵入方式解决了「点击左侧用户 → 右侧显示对应详情」这一高频需求。它不依赖外部框架，兼容传统 PHP 项目结构，兼具开发效率、运行性能与长期可维护性。只要确保前后端 data-user-id 一致性、做好安全过滤、辅以简洁的 JS 控制逻辑，即可快速落地一个专业级的双栏交互界面。
