<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>body { width:760px; } div{float:left;width:200px;margin:10px20px;font-family:\5FAE\8F6F\96C5\9ED1;}h3{margin:0;border:1px solid black;color:white;background-color:green;} p{margin:5px 0;padding:5px 0;border:1px solid black;background-color: green;color:white;} .highlight1 { color:black; background-color:gold; } .highlight2 { color:black; background-color:red; } .highlight3 { color:black; background-color:blue; }form { clear:both; } button {font:normal 16px/1 \5FAE\8F6F\96C5\9ED1; margin:2px 20px; padding:2px;cursor:pointer; width:350px; height:40px; display:block; }</style> <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script><script type="text/javascript">$(function(){ /*当鼠标单击第一个按钮元素时，选取出所有的内容段落1，并为它们设置一个高亮的样式highlight1；当鼠标单击第二个按钮元素时，选取出所有的内容段落1，并为它们设置一个高亮的样式highlight2；当鼠标单击第三个按钮元素时，选取出所有的内容段落1，并为它们设置一个高亮的样式highlight3。请在页面中填入能够实现上述页面交互效果的jQuery代码，并且规定分别使用三种不同的jQuery选择器来选取所有的内容段落1。*/$('#btn1').c});</script></head><body><div> <h3>主题一</h3> <p>内容段落1</p> <p>内容段落2</p> <p>内容段落3</p></div><div> <h3>主题二</h3> <p>内容段落1</p> <p>内容段落2</p> <p>内容段落3</p></div><div> <h3>主题三</h3> <p>内容段落1</p> <p>内容段落2</p> <p>内容段落3</p> </div> <form> <button type="button" id="btn1">高亮样式1突出显示所有的内容段落1</button> <button type="button" id="btn2">高亮样式2突出显示所有的内容段落1</button> <button type="button" id="btn3">高亮样式3突出显示所有的内容段落1</button> </form> </body></html>谁能帮我做出来！
1 回答
糖小米_
TA贡献1条经验 获得超1个赞
$(function(){
$('#btn1').click(function(){
$('div p:nth-child(2)').addClass('highlight1');
});
$('#btn2').click(function(){
$('div p:contains("2")').addClass('highlight2');
});
$('#btn3').click(function(){
$('div p:last-child').addClass('highlight3');
});
});- 1 回答
- 1 关注
- 2101 浏览
添加回答
举报
0/150
提交
取消