5个div元素,每个div中有一个p元素,当点击第二个div时,第二个div中的p元素背景色改为蓝色
时间: 2024-04-09 15:28:09 浏览: 13
可以使用JavaScript来实现这个效果。首先,给每个div元素添加一个点击事件监听器。当点击某个div时,触发相应的事件处理函数,将第二个div中的p元素背景色改为蓝色。以下是一个可能的实现:
HTML代码:
```html
<div id="div1">
<p>内容1</p>
</div>
<div id="div2">
<p>内容2</p>
</div>
<div id="div3">
<p>内容3</p>
</div>
<div id="div4">
<p>内容4</p>
</div>
<div id="div5">
<p>内容5</p>
</div>
```
JavaScript代码:
```javascript
// 获取所有的div元素
var divs = document.querySelectorAll('div');
// 给每个div添加点击事件监听器
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', function() {
// 移除所有div中p元素的背景色
var paragraphs = document.querySelectorAll('div p');
for (var j = 0; j < paragraphs.length; j++) {
paragraphs[j].style.backgroundColor = '';
}
// 将当前点击的div中p元素的背景色改为蓝色
var currentDivParagraph = this.querySelector('p');
currentDivParagraph.style.backgroundColor = 'blue';
});
}
```
这样,当点击第二个div时,第二个div中的p元素的背景色将会变为蓝色。