任务2-9　图形选项卡的制作

需求：

在图形菜单的基础上，制作图形选项卡，如图2-9所示。选项卡内容区域的大小为400px*240px，选项卡标题区域的左侧留有30px空白横线，选项卡标题区域的右侧按剩余空间填满空白横线。

分析：

为了使选项卡标题区域两侧有空白横线，这里采取了将选项卡内容区域置于选项卡标题区域的垂直下方，没有图形的部分用内容区域边框线填充，为了产生良好的视觉，内容区域的边框颜色应与图形菜单中非激活菜单的底线一致。

实现：

第一步，新建文件夹09，在09文件夹中新建名为“图形选项卡.htm”的页面。

第二步，在页面中添加两个DIV，分别作为图形选项卡标题区域和内容区域，采用绝对定位方式，将选项卡标题区域的z-index设为100，内容区域的z-index设为99。代码如清单2-23所示。

清单2-23　图形选项卡标题区域和内容区域的定义

第三步，复制任务2-8中的图形菜单部分。

第四步，在内容区域放入一个DIV作为显示边框，边框颜色为#CCC，代码如清单2-24所示。

清单2-24　内容区域样式设置

第五步，在显示边框的DIV内放入三个用来显示具体信息的页面DIV，代码如清单2-25所示。

清单2-25　用来显示各自信息的三个DIV

第六步，为使每个选项内容页面不可见，在初始脚本中添加清单2-26所示的代码。

清单2-26　隐藏所有选项内容页面代码段

第七步，为使单击图形菜单后显示相应的内容页，改写鼠标单击事件的处理函数代码。具体内容如清单2-27所示。

清单2-27　选项卡鼠标单击事件的处理函数

说明

z-index大的DIV排列在小的DIV上面，而默认情况是“后来者居上”。

Border的样式设置按提示顺序给出： solid 1px #ccc。

绝对定位时，left和top属性默认值为0px。

使用表达式menu_caption.length，而不用具体常量3作为循环变量的上界，可以提高程序的可维护性。