《Web交互开发》实验教学指导/实验三: jQuery操作DOM 任务三:将鼠标移到表格行时,当前行高亮显示,移开时恢复原来的样式。(5分) 要求 请将上述任务的操作方法,填写到实验报告册中。 2、导航条的使用 (1)导航条的作用:第一,单击标题时,可以伸缩导航条的内容,同时,标题中的 提示图片也随之改变。第二,单击“简化”链接时,隐藏指定的内容,并将“简化”字样 变成“更多”,单击“更多”链接时,返回初始状态,并改变指定显示元素的背景色 (2)导航条的样式如图所示3-2-1,3-2-2,3-3-3所示。 图书分类 图3-2-1导航条标题 小说(H0)文艺(230)青查(A3 少儿(1580)生活(870)社社(N60) 管理(A450)计算机(1780数直(90) 工具书(刘5引进版(980)其它类(20 图书分类 简化》 小说(0)文艺(23)青看(143) 少儿(1560)生活(80)其它类(23 图3-2-3显示全部内容 图3-2-2显示两行内容 (3)部分 jQuery代码如下所示 ipt type=text/javascript SC".clsHead").click(function O( if(s(. clscContent")is(" visible")) s(". clsHead Images/al. gif"); sC.clsContent"). css(display Helsel S".clsHead span img"). attr("src","Images/a2.gif"); s(".clsContent").css("display", "block"); ) ); /script (4)请完成下面的任务 任务一:上述代码中S(" . clsHead span img")at"sr;" Images/al. gif" 本讲共计7页当前第3页《Web 交互开发》实验教学指导 / 实验三 ：jQuery 操作 DOM 本讲共计 7 页 | 当前第 3 页 任务三：将鼠标移到表格行时，当前行高亮显示，移开时恢复原来的样式。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、导航条的使用 （1）导航条的作用：第一，单击标题时，可以伸缩导航条的内容，同时，标题中的 提示图片也随之改变。第二，单击“简化”链接时，隐藏指定的内容，并将“简化”字样 变成“更多”，单击“更多”链接时，返回初始状态，并改变指定显示元素的背景色。 （2）导航条的样式如图所示 3-2-1，3-2-2，3-3-3 所示。 （3）部分 jQuery 代码如下所示： <script type="text/javascript"> $(function(){ $(".clsHead").click(function(){ if($(".clsContent").is(":visible")){ $(".clsHead span img").attr("src","Images/a1.gif"); $(".clsContent").css("display","none"); }else{ $(".clsHead span img").attr("src","Images/a2.gif"); $(".clsContent").css("display","block"); } }); }); </script> （4）请完成下面的任务： 任务一：上述代码中$(".clsHead span img").attr("src","Images/a1.gif")和 图 3-2-1 导航条标题 图 3-2-2 显示两行内容 图 3-2-3 显示全部内容