HTML实现点击左侧菜单，右侧内容切换
在HTML中实现点击左侧菜单，右侧内容切换的功能，可以使用JavaScript来控制。以下是一个简单的实现示例：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右内容切换示例</title>
</head>
<body>
<div class="menu">
<ul>
<li onclick="switchContent('content1')">内容1</li>
<li onclick="switchContent('content2')">内容2</li>
<li onclick="switchContent('content3')">内容3</li>
</ul>
</div>
<div class="content">
<div id="content1" style="display: block;">这是内容1</div>
<div id="content2" style="display: none;">这是内容2</div>
<div id="content3" style="display: none;">这是内容3</div>
</div>
<script>
function switchContent(id) {
var contents = document.getElementsByClassName("content");
for (var i = 0; i < contents.length; i++) {
var content = contents[i];
if (content.id === id) {
content.style.display = "block";
} else {
content.style.display = "none";
}
}
}
</script>
</body>
</html>在这个示例中，我们定义了一个左侧菜单和一个包含三个内容区域的右侧内容区域。每个菜单项都有一个onclick事件，当点击时会调用switchContent函数并传递对应内容区域的ID。该函数会遍历所有的内容区域，将除了当前选中的内容区域之外的所有内容区域设置为不可见（display: none），然后将选中的内容区域设置为可见。
评论已关闭