任务2-9 图形选项卡的制作
需求：
在图形菜单的基础上，制作图形选项卡，如图2-9所示。选项卡内容区域的大小为400px*240px，选项卡标题区域的左侧留有30px空白横线，选项卡标题区域的右侧按剩余空间填满空白横线。
图2-9 图形选项卡
分析：
为了使选项卡标题区域两侧有空白横线，这里采取了将选项卡内容区域置于选项卡标题区域的垂直下方，没有图形的部分用内容区域边框线填充，为了产生良好的视觉，内容区域的边框颜色应与图形菜单中非激活菜单的底线一致。
实现：
第一步，新建文件夹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作为循环变量的上界，可以提高程序的可维护性。