有5个标题和5个需要变化的div
时间: 2024-04-16 10:24:54 浏览: 13
当有5个标题和5个需要变化的div时,你可以按照以下方式进行编写:
```html
<!DOCTYPE html>
<html>
<head>
<title>点击标题变化中间div</title>
<style>
.title {
cursor: pointer;
font-weight: bold;
}
.content {
display: none;
margin-top: 20px;
padding: 10px;
background-color: lightgray;
}
</style>
</head>
<body>
<h1 class="title">标题1</h1>
<h1 class="title">标题2</h1>
<h1 class="title">标题3</h1>
<h1 class="title">标题4</h1>
<h1 class="title">标题5</h1>
<div id="content1" class="content">
内容1
</div>
<div id="content2" class="content">
内容2
</div>
<div id="content3" class="content">
内容3
</div>
<div id="content4" class="content">
内容4
</div>
<div id="content5" class="content">
内容5
</div>
<script>
const titleElements = document.querySelectorAll('.title');
const contentDivs = document.querySelectorAll('.content');
titleElements.forEach((title, index) => {
title.addEventListener('click', () => {
contentDivs.forEach((contentDiv) => {
contentDiv.style.display = 'none'; // 隐藏所有内容div
});
contentDivs[index].style.display = 'block'; // 显示对应索引的内容div
});
});
</script>
</body>
</html>
```
在上述示例中,我们为每个标题和内容div分别添加了类名"title"和"content"。通过JavaScript,我们获取了所有标题元素和内容div元素,并为每个标题元素添加了点击事件监听器。当用户点击任何一个标题时,会触发对应的事件处理函数。在事件处理函数中,我们首先将所有内容div隐藏,然后根据点击的标题索引,将对应的内容div显示出来。
这样,每个标题与对应的内容div就建立了关联,点击标题后,相应的内容div会显示出来,其他内容div则隐藏。你可以根据需求自定义标题和内容的样式以及具体的内容显示和隐藏逻辑。