项目九 JavaScript应用实例-“Tab”面板设计

网站前端开发项目教程单元一网站前端开发基础01020304目录单元二HTML结构化语言单元三

CSS表现技术单元四JavaScript交互技术05综合实训企业网站设计项目九

JavaScript应用实例—新城实验小学首页“Tab”面板设计单元四JavaScript交互技术任务设计“新闻动态”和“通知公告”Tab面板焦点图轮播

常遇到网页内容多版面少的问题，Tab面板技术可以解决这个问题，在有限区域内显示更多内容。Tab面板由标题块和内容块两大部分组成，标题个数与内容子块个数相同，某个标题获取焦点，其对应的内容块显示，其他内容块隐藏。Tab面板设计分三步：第一步构建HTML，即构建标题和内容块；第二步设计CSS样式表，设计标题和内容块样式；第三步添加JS特效，实现用户鼠标移到某个标题栏上，其对应的内容块显示，其他内容块隐藏的特效。本项目将详细介绍Tab面板技术。1

学习目标：DOM节点对象DOM节点元素Tab面板项目概述理解Tab面板技术的设计思路。掌握DOM节点对象属性。掌握DOM节点元素属性和内容操作。2

知识要求：设计“新闻动态”和“通知公告”Tab面板01任务情境“新闻动态”面板图9-1“新闻动态”面板“通知公告”面板新城实验小学首页的“新闻动态”和“通知公告”栏包括新闻动态、通知公告两块信息，两块信息在一个模块里交替显示，用户点击“新闻动态”标题时，模块中显示新闻动态的内容，用户点击“通知公告”标题时，模块中显示通知公告信息。01任务分析在一个模块中显示多块内容可以通过Tab面板技术实现,本任务利用Tab面板技术完成“通知公告/新闻动态”模块设计。设计“新闻动态”和“通知公告”Tab面板01知识准备一、BOM操作使用DOM节点对象的的parentNode、childNodes属性访问该元素的父、子节点元素等，具体如下表。【例9-1】DOM节点相关元素的访问一、访问DOM节点相关元素设计“新闻动态”和“通知公告”Tab面板01知识准备一、BOM操作二、DOM元素属性与内容操作。

HTMLDOM对象模型中不仅可以访问元素中节点，还可以对元素属性和内容进行操作，其常用方法如下表所示。【例9-2】DOM元素属性与内容操作设计“新闻动态”和“通知公告”Tab面板01任务实现一、BOM操作1.结构分析，：Tab面板最外套一个div,该div又由标题和内容两大块组成,其中标题块可用一个无序项目列表(含有2个列表项);内容块用2个div,每div用一个无序列表,Tab面板结构分析图如右图所示。设计“新闻动态”和“通知公告”Tab面板01任务实现一、BOM操作2.样式分析(1)对Tab面板的最外div设置样式,实现对整个Tab面板控制。(2)对Tab面板标题设置样式,设置其<ul>的背景图片,<li>左浮动、宽、行高、字体及背景图片样式。(3)对Tab面板内容设置样式,为了便于控制内容块,为每个内容div取id,并让“新闻动态”div默认隐藏(通过display属性控制div的隐藏和显示)。(4)对Tab面板内容中ul设置样式,常根据客户需求设置该样式,本任务中只需将<ul>设置新闻列表样式即可。设计“新闻动态”和“通知公告”Tab面板01任务实现一、BOM操作3.JS效果分析

（1）为Tab面板的标题栏元素<li>添加鼠标滑过事件(onmouseover)。（2）调用函数实现Tab栏切换效果。4.制作HTML页面结构打开“index.html”文件,在已完成的“新城实验小学”主页的“新闻动态”区域添加代码。5.设计CSS样式打开"index.css"文件,具体设计如下:设计“新闻动态”和“通知公告”Tab面板01任务实现一、BOM操作（1）为Tab面板的标题栏元素<li>添加鼠标滑过事件(onmouseover)。（2）调用函数实现Tab栏切换效果。4.制作HTML页面结构打开“index.html”文件,在已完成的“新城实验小学”主页的“新闻动态”区域添加代码。5.设计CSS样式打开"index.css"文件,具体设计如下:（1）设置Tab栏最外的div样式

（2）设置Tab面板标题行(<ul>)的样式

设计“新闻动态”和“通知公告”Tab面板01任务实现一、BOM操作（3）设置Tab面板标题行的项目列表项(<li>)的样式

（4）设置Tab面板标题行的项目列表项超链接(<a>)的样式（5）设置Tab面板标题行当前显示的列表项的样式

（6）设置Tab面板标题行当前隐藏的列表项的样式(鼠标不在该列表项）

（7）设置Tab面板内容块的项目列表(<ul>)整体样式（8）设置Tab面板内容块的列表项(<li>)的样式

（9）设置Tab面板内容块的列表项超链接(<a>)的样式,设置块状显示

（10）设置鼠标经过Tab面板内容块的列表项的样式,设置其字体颜色

（11）设置Tab面板内容块的列表项中日期(<span>)的样式设计“新闻动态”和“通知公告”Tab面板01任务实现一、BOM操作6.编写JavaScript代码，实现Tab面板切换（1）获取当前获取焦点的标题栏的父节点,即该列表项的项目列表<ul>,这里<ul>是类名为scroll的标题项目列表。（2）通过访问节点getElementsByTagName的方法对标题项目列表中所有列表遍历,遍历同时判断,若该列表索引与传递参数相同,则设置该标题列表项的样式为sd01(当前获取焦点样式),其对应内容块设为显示。其他的列表项样式为sd02,及其对应的模块设为隐藏。打开“index.js”文件,根据上面分析编写代码。设计“新闻动态”和“通知公告”Tab面板经验指导

1、节点关系DOM把文档视为一棵树形结构，也称为节点数。节点之间的关系包括：上下父子关系、相邻兄弟关系。简单描述如下：在节点树中，最顶端节点为根节点。除了根节点之外，每个节点都有一个父节点。节点可以包含任何数量的子节点。叶子时没有子节点的节点。同级节点是拥有相同父节点的节点。2、访问节点childNodes属性返回所有子节点的列表，它是一个随时可变的类数组。项目总结通过完成本项目，让学生掌握HTMLBOM对象的使用，会利用setTimeout、clearTimeout、setInterval、clearInterval方法设置和清除定时器，会灵活运用这些方法完成“焦点图轮播”特效等网页应用。

通过完成本项目，让学生了解Tab面板设计思路，掌握访问DOM元素相关节点，元素属性和内容的操作，onmouseover事件的应用，会灵活运用这些方法完成“Tab面板”特效等JavaScript应用。。拓展练习一、BOM操作任务要求：请结合给出的素材，在“海南旅游网”首页Tab面板上，设计制作“海南旅游网”首页中“推荐景点”和“推荐酒店”模块，效果图如下图所示。训练1：“海南旅游网”首页Tab面板设计拓展练习一、BOM操作具体要求：1.“Tab面板”模块宽度为237px，面板里面内容