使用jQuery事件处理机制,在网页DIV中设置诗句,在页面空白处使用toggle()函数,单击时诗词正文在三种颜色之间切换。
时间: 2023-06-27 14:06:41 浏览: 102
可以使用以下代码实现:
HTML部分:
```
<div id="poem">
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</div>
```
JavaScript部分:
```
$(document).ready(function(){
// 绑定点击事件
$('body').click(function(){
$('#poem p').toggle(function(){
// 切换三种颜色
$(this).css('color', 'red');
}, function(){
$(this).css('color', 'green');
}, function(){
$(this).css('color', 'blue');
});
});
});
```
解释:
1. 首先使用`$(document).ready()`函数确保DOM加载完毕后再执行JavaScript代码。
2. 使用`$('body').click()`函数为页面绑定点击事件。
3. 在点击事件中使用`$('#poem p').toggle()`函数为诗句绑定toggle效果,并在三个回调函数中分别设定不同的颜色。
阅读全文