完成本任务所用到的主要知识点：
➢document对象的getElementById（）方法获取页面元素对象
➢页面元素对象的style属性
➢页面元素对象的className属性
➢CSS的各种选择器
➢CSS的background，float，margin，padding等属性
为了在网页局部有限的区域内尽可能多地显示内容，很多网站在首页中普遍采用了选项卡和标签页相结合的内容显示方式。网站首页的局部图像，如图上机5.6所示。
图上机5.6 选项卡和标签页
当鼠标放置在某个选项卡表面时，选项卡本身会突出显示，而且下方的标签页也会切换为与此选项卡的主题相关的内容。如图上机5.7所示。
图上机5.7 选项卡和标签页
现在已经为你准备好了8张图片，它们作为标签页的内容。如图上机5.8所示。
图上机5.8 标签页内容
另有一张图片作为选项卡的背景。如图上机5.9所示。
图上机5.9 选项卡的背景(www.xing528.com)
选项卡可以用无序列表及列表项来实现，各个标签页的内容分别用<div></div>块来包裹。在各个选项卡上监听onmouseover事件，由它的事件处理程序改变选项卡的样式并切换相关标签页的显示或隐藏。
（1）创建网页文档。
（2）编写HTML代码，用无序列表及列表项来实现各个选项卡，用多个<div></div>块来包裹各个标签页的内容。代码如下：
表示各个选项卡的<li></li>标签的id属性，它们共用相同的前缀“slide_”，后缀是1～8的数字；表示各个标签页的<div></div>的id属性，它们共用相同的前缀“tab_”，后缀是1～8的数字；每个表示选项卡的<li></li>标签对应一个表示标签页的<div></div>，二者的id的数字后缀是相同的。这样做是为了稍后在JavaScript代码中方便处理。
（3）在<style></style>标签中定义样式表，代码如下：
id为“controlSlide”的<ul></ul>标签是各个选项卡的容器。类选择器“current”是为当前选项卡准备的。
（4）修改HTML代码，将第一个选项卡设置为当前选项卡；使用<div></div>标签的内联样式，将除第一个标签页之外其他标签页都隐藏。代码如下：
（5）运行页面，此时结果应如图上机5.6所示。
（6）接下来要解决各个选项卡与用户的鼠标互动的问题，即鼠标移入某个选项卡表面时，此选项卡本身以及与它相关的标签页的样式应被改变。修改各个选项卡的HTML代码，增加事件处理，代码如下：
注意：向事件处理函数setCurrentTab所传递的实参值正好是它所在的<li></li>标签的id值的数字后缀，同时也是与它所在的<li></li>标签对应的标签页<div></div>的id值的数字后缀。
（7）在<script></script>块中编写setCurrentTab函数，代码如下：
（8）运行页面，测试功能。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
