原因与结果

等级： 初级

模式在软件工程中是必不可少的，它们代表了程序逻辑中潜在的可重用组件。然而，模式的使用不仅仅局限于程序逻辑，在DevOps、用户支持以及用户界面等其他领域也有它们的存在。

一个常见的用户界面模式是在页面的一个部分总结数据，该部分包含某种类型的列表（如文本、图像或图标），用于描述或分类一组数据。当点击列表项时，其背后的详细数据将在页面相邻窗格中显示。

例如，在房地产网站上点击待售房产列表中的地址，将在页面的另一部分显示该房产的详细信息。

这个挑战要求实现它的开发者遵循以下限制：

负责创建自己的测试数据。使用硬编码的Javascript对象来定义测试数据（见下文）。
在您的第一个版本中，仅使用原生HTML/CSS/Javascript。
当实现后续版本时，您可以考虑使用其他包或库。

用户故事

[ ] 用户可以在页面的摘要窗格中看到垂直排列的人员姓名列表。
[ ] 用户可以点击列表中的一个姓名，以便在页面相邻的窗格中更新该人员的完整姓名、地址、电话号码和生日。
[ ] 用户可以点击列表中的另一个姓名，以便刷新该人员的详细信息窗格。

额外功能

[ ] 当光标悬停在摘要窗格中的姓名上时，可以看到姓名高亮显示。
[ ] 当用户点击摘要窗格中的姓名时，可以使用选择效果（颜色、大小等）突出显示姓名。这与悬停效果不同。
[ ] 当点击摘要列表中的新姓名时，可以从摘要列表中删除姓名的选择效果。

有用链接和资源

DOM Events
考虑使用以下JavaScript对象格式定义测试数据：

const people = [
  {name: "...", street: "...", city: "...", state: "...", country: "...", telephone: "...", birthday: "..."},
  .
  .
  .
  {name: "...", street: "...", city: "...", state: "...", country: "...", telephone: "...", birthday: "..."}
];

示例项目

查看页面左侧导航项与页面主体之间的交互Javascript MDN网站