单元7设计选项卡类网页特效(JavaScript+jQuery网页特效设计实例).ppt

单元7 设计选项卡类网页特效 【特效赏析】 任务7-1 应用setInterval函数和display属性实现选项卡的手动切换和自动切换 网页0701.html中的选项卡如图7-1所示。 单击选项卡标题能实现手动切换，同时该选项卡还能自动进行切换。 图7-1　网页0701.html中的选项卡 任务7-2 应用jQuery的index和find等方法实现横向选项卡 网页0702.htm中的横向选项卡如图7-2所示，单击选项卡标题实现选项卡的切换。 图7-2　网页0702.htm中的横向选项卡 【知识必备】 7.1　JavaScript的数组对象 1．定义数组 2．访问数组 3．JavaScript Array对象的主要 属性和方法 7.2　JSON及其使用 【引导训练】 任务7-3 应用DOM的className 和style等属性设计纵向选项卡 【任务描述】 网页0703.html中的纵向选项卡如图7-3所示，鼠标指针指向选项卡标题时自动切换选项卡。 图7-3　网页0703.html中的纵向选项卡 任务7-4 应用DOM的className和style等属性设计横向选项卡 【任务描述】 网页0704.html中的横向选项卡如图7-4所示，鼠标指针指向选项卡标题时实现选项卡的切换。 图7-4　网页