基于JSON的联系人列表与详情页动态切换是前端开发中非常实用的交互功能，核心是通过JSON存储联系人结构化数据，再通过DOM操作实现列表渲染和页面内容切换，无需刷新页面即可完成交互。
一、准备联系人JSON数据
首先需要定义结构清晰的JSON数据，存储所有联系人的基础信息和详情信息，方便后续读取和渲染。我们可以把所有联系人放在一个数组中，每个数组元素是一个联系人的完整对象。
[
{
"id": 1,
"name": "张三",
"phone": "13800138000",
"email": "zhangsan@ipipp.com",
"address": "北京市朝阳区XX路1号",
"avatar": "avatar1.png"
},
{
"id": 2,
"name": "李四",
"phone": "13900139000",
"email": "lisi@ipipp.com",
"address": "上海市浦东新区XX路2号",
"avatar": "avatar2.png"
},
{
"id": 3,
"name": "王五",
"phone": "13700137000",
"email": "wangwu@ipipp.com",
"address": "广州市天河区XX路3号",
"avatar": "avatar3.png"
}
]
二、HTML页面结构搭建
页面需要包含两个核心区域：左侧的联系人列表区域，和右侧的联系人详情展示区域。初始状态下详情区域可以显示默认提示，点击列表项后切换为对应联系人的详情。
<div class="container">
<div class="contact-list">
<h3>联系人列表</h3>
<ul id="listContainer"></ul>
</div>
<div class="contact-detail">
<h3>联系人详情</h3>
<div id="detailContainer">
<p>请点击左侧联系人查看详情</p>
</div>
</div>
</div>
三、渲染联系人列表
通过JavaScript读取JSON数据，遍历数组生成列表项，插入到列表容器中。每个列表项需要绑定点击事件，点击时触发详情切换逻辑。
// 假设上面的JSON数据存储在contactData变量中
const contactData = [
{
"id": 1,
"name": "张三",
"phone": "13800138000",
"email": "zhangsan@ipipp.com",
"address": "北京市朝阳区XX路1号",
"avatar": "avatar1.png"
},
{
"id": 2,
"name": "李四",
"phone": "13900139000",
"email": "lisi@ipipp.com",
"address": "上海市浦东新区XX路2号",
"avatar": "avatar2.png"
},
{
"id": 3,
"name": "王五",
"phone": "13700137000",
"email": "wangwu@ipipp.com",
"address": "广州市天河区XX路3号",
"avatar": "avatar3.png"
}
];
// 获取列表容器
const listContainer = document.getElementById('listContainer');
// 渲染联系人列表
function renderContactList() {
// 清空原有内容
listContainer.innerHTML = '';
// 遍历JSON数据生成列表项
contactData.forEach(contact => {
const li = document.createElement('li');
li.className = 'contact-item';
li.dataset.id = contact.id;
li.textContent = contact.name;
// 绑定点击事件
li.addEventListener('click', () => showContactDetail(contact.id));
listContainer.appendChild(li);
});
}
// 初始化调用渲染函数
renderContactList();
四、实现详情页动态切换
点击列表项时，根据联系人的id从JSON数据中找到对应的联系人对象，然后将详情区域的内容替换为该联系人的详细信息，实现无刷新切换。
// 获取详情容器
const detailContainer = document.getElementById('detailContainer');
// 显示联系人详情的函数
function showContactDetail(contactId) {
// 根据id查找对应的联系人数据
const targetContact = contactData.find(item => item.id === contactId);
if (!targetContact) {
detailContainer.innerHTML = '<p>未找到该联系人信息</p>';
return;
}
// 拼接详情HTML内容
const detailHTML = `
<div class="detail-info">
<p><strong>姓名：</strong>${targetContact.name}</p>
<p><strong>电话：</strong>${targetContact.phone}</p>
<p><strong>邮箱：</strong>${targetContact.email}</p>
<p><strong>地址：</strong>${targetContact.address}</p>
</div>
`;
// 更新详情容器内容
detailContainer.innerHTML = detailHTML;
// 高亮当前选中的列表项
document.querySelectorAll('.contact-item').forEach(item => {
item.classList.remove('active');
if (parseInt(item.dataset.id) === contactId) {
item.classList.add('active');
}
});
}
五、补充基础样式
为了让页面布局更清晰，可以添加一些简单的CSS样式，区分列表区域和详情区域，同时高亮选中的列表项。
.container {
display: flex;
width: 100%;
max-width: 1200px;
margin: 0 auto;
min-height: 500px;
}
.contact-list {
width: 30%;
border-right: 1px solid #eee;
padding: 20px;
}
.contact-list ul {
list-style: none;
padding: 0;
}
.contact-item {
padding: 12px 15px;
border-bottom: 1px solid #f5f5f5;
cursor: pointer;
}
.contact-item:hover {
background-color: #f9f9f9;
}
.contact-item.active {
background-color: #e8f4ff;
color: #1890ff;
}
.contact-detail {
width: 70%;
padding: 20px;
}
.detail-info p {
margin: 10px 0;
line-height: 1.6;
}
六、功能优化建议
完成基础功能后，还可以根据实际需求做进一步优化：
- 可以给列表添加搜索功能，根据姓名或电话筛选联系人，筛选逻辑也是基于JSON数据遍历实现
- 如果联系人数据较多，可以添加分页加载，避免一次性渲染过多DOM元素影响性能
- 可以把JSON数据改为从接口请求获取，实现数据的动态更新，切换逻辑不需要做大的调整
- 可以给详情切换添加过渡动画，提升用户交互体验