5个div元素,每个div中有一个默认隐藏的弹窗,当点击第二个div时,第二个div中的弹窗显示
时间: 2024-04-09 17:30:58 浏览: 9
你可以使用CSS和JavaScript来实现这个效果。首先,使用CSS将弹窗设置为默认隐藏。然后,使用JavaScript添加点击事件监听器,当点击第二个div时,将第二个div中的弹窗显示出来。以下是一个可能的实现:
HTML代码:
```html
<div id="div1">
<p>内容1</p>
<div class="popup">弹窗1</div>
</div>
<div id="div2">
<p>内容2</p>
<div class="popup">弹窗2</div>
</div>
<div id="div3">
<p>内容3</p>
<div class="popup">弹窗3</div>
</div>
<div id="div4">
<p>内容4</p>
<div class="popup">弹窗4</div>
</div>
<div id="div5">
<p>内容5</p>
<div class="popup">弹窗5</div>
</div>
```
CSS代码:
```css
.popup {
display: none;
}
```
JavaScript代码:
```javascript
// 获取所有的div元素
var divs = document.querySelectorAll('div');
// 给每个div添加点击事件监听器
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', function() {
// 隐藏所有div中的弹窗
var popups = document.querySelectorAll('div .popup');
for (var j = 0; j < popups.length; j++) {
popups[j].style.display = 'none';
}
// 显示当前点击的div中的弹窗
var currentDivPopup = this.querySelector('.popup');
currentDivPopup.style.display = 'block';
});
}
```
这样,当点击第二个div时,第二个div中的弹窗将会显示出来,而其他的弹窗将保持隐藏。