动态内容切换实例

动态内容切换实例：

<!DOCTYPE html>    
<html lang="zh-CN">    
<head>    
<meta charset="UTF-8">    
<title>动态内容切换示例</title>    
<style>    
.container {    
display: flex;    
gap: 20px;    
padding: 20px;    
}    
#controlDiv {    
width: 200px;    
border-right: 2px solid #ccc;    
padding-right: 20px;    
}    
.control-item {    
padding: 10px;    
margin: 5px 0;    
background: #f0f0f0;    
cursor: pointer;    
transition: all 0.3s;    
}    
.control-item:hover {    
background: #e0e0e0;    
}    
.control-item.active {    
background: #2196F3;    
color: white;    
}    
#contentDiv {    
flex: 1;    
}    
#contentDiv img {    
max-width: 100%;    
height: auto;    
border: 1px solid #ddd;    
margin-top: 10px;    
}    
</style>    
</head>    
<body>    
<div class="container">    
<!-- 控制DIV -->    
<div id="controlDiv">    
<div class="control-item" data-index="0">显示内容1</div>    
<div class="control-item" data-index="1">显示内容2</div>    
<div class="control-item" data-index="2">显示内容3</div>    
</div>    
<!-- 内容DIV -->    
<div id="contentDiv">    
<a id="contentLink" href="#">    
<h2 id="contentTitle"></h2>    
<img id="contentImage" src="" alt="示例图片">    
</a>    
</div>    
</div>    
<script>    
// 内容数据    
const contents = [    
{    
title: "第一个内容",    
link: "#",    
image: "https://picsum.photos/300/200?random=1"    
},    
{    
title: "第二个内容",    
link: "#",    
image: "https://picsum.photos/300/200?random=2"    
},    
{    
title: "第三个内容",    
link: "#",    
image: "https://picsum.photos/300/200?random=3"    
}    
];    
// 获取DOM元素    
const controlItems = document.querySelectorAll('.control-item');    
const contentTitle = document.getElementById('contentTitle');    
const contentImage = document.getElementById('contentImage');    
const contentLink = document.getElementById('contentLink');    
// 初始化第一个内容    
updateContent(0);    
// 为每个控制项添加点击事件    
controlItems.forEach(item => {    
item.addEventListener('click', function() {    
const index = parseInt(this.dataset.index);    
// 移除所有激活状态    
controlItems.forEach(item => item.classList.remove('active'));    
// 添加当前激活状态    
this.classList.add('active');    
// 更新内容    
updateContent(index);    
});    
});    
function updateContent(index) {    
const content = contents[index];    
contentTitle.textContent = content.title;    
contentLink.href = content.link;    
contentImage.src = content.image;    
contentImage.alt = content.title;    
}    
</script>    
</body>    
</html>