单元8设计内容展开与折叠类网页特效(JavaScript+jQuery网页特效设计实例).ppt

图8-12　网页0806.html中折叠与展开网页内容特效的初始状态 图8-13　在网页0806.html中单击超链接显示对应的网页内容 【同步训练】 任务8-7 应用DOM的getElementById 方法和className属性设计网页内容 折叠与展开特效 【任务描述】 网页0807.html中折叠与展开网页内容特效的初始状态如图8-14所示，单击超链接“投影机”时展开相应的网页内容，如图8-15所示。 图8-14　网页0807.html中折叠与展开 网页内容特效的初始状态 图8-15　在网页0807.html中单击超链接“投影机”时展开相应的网页内容 任务8-8 应用jQuery的hover和click事件设计网页内容折叠与展开特效 【任务描述】 网页0808.html中折叠与展开网页内容特效的初始状态如图8-16所示，鼠标指针指向 按钮时，自动显示如图8-17所示的库存地区列表。 图8-16　网页0808.html中折叠与展开网页内容特效的初始状态 图8-17　网页0808.html中自动显示库存地区列表 任务8-9 应用jQuery的toggle和hasClass方法设计网页内容折叠与展开特效 【任务描述】 网页0809.html中折叠与展开网页内容特效的初始状态如图8-18所示，单击 按钮时，展开隐藏的部分内容，如图