如何在点击用户姓名时动态加载并显示其详细信息（左右分栏交互实现）-js教程-PHP中文网

如何在点击用户姓名时动态加载并显示其详细信息（左右分栏交互实现）

本文介绍一种基于 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：

✅ 注意：使用 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%20echo%20htmlspecialchars(%24inv['userEmail']);%20?>">
              <?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 控制逻辑，即可快速落地一个专业级的双栏交互界面。