Web前端开发（JavaScript+jQuery）【教学PPT】项目7 标签切换效果的实现.pptx

Web前端技术

标签切换效果的实现

7.1界面分析实现一个名片标签切换效果；使用div标签实现标题和内容；配合CSS样式完成整个页面设计效果；通过javascript函数实现页面间的自由切换。

7.2页面实现HTML基本框架的实现divclass=tab-content-divcurrent h3春晓span孟浩然/span/h3 p春眠不觉晓，处处闻啼鸟。br 夜来风雨声，花落知道多少。 /p/divdivclass=tab-head divclass=tab-head-divcurrent春天/div divclass=tab-head-div夏天/div/div

7.3页面具体实现2.添加CSS样式表实现整个页面静态效果在头部添加style标签，添加样式；对页面整体进行设置；设置四个标题栏整体的高度、对齐方式等；设置主题内容样式；通过display属性设置内容显隐效果。

7.3页面具体实现3.书写JavaScript函数声明变量，通过class获取所需内容；通过for为每个标签添加鼠标滑过事件；在事件的处理函数中遍历标签对应的所有显示内容；当鼠标滑过标签时，通过classList的add()方法添加current，否则通过remove()方法移出current。javascript效果图

本章小结本节课主要以示例的形式讲解了如何利用DOM的方式在JavaScript中操作HTML元素和CSS样式，以及根据开发需求能够通过节点的方式添加、或删除指定的元素。同样也可以通过节点的方式移动、克隆元素。