首页 理论教育 实现自定义命令按钮控制框架的显示与隐藏

实现自定义命令按钮控制框架的显示与隐藏

时间:2023-10-18 理论教育 版权反馈
【摘要】:图上机4.2框架首页现在希望在tool.html页面中放置一个自定义命令按钮,单击此按钮能让左侧框架隐藏,再次单击此按钮能让左侧框架恢复显示。左侧框架隐藏的实现方式为将它所占据的宽度设为0像素,左侧框架恢复显示的实现方式为将它所占据的宽度还原为原来的宽度。index.html将作为实现框架集的主页面,编写框架集代码如下:为nav.html、content.html页面编写一些模拟的内容。图上机4.3框架集主页面单击“隐藏导航栏”按钮后,效果如图上机4.4所示。

实现自定义命令按钮控制框架的显示与隐藏

完成本任务所用到的主要知识点:

➢window对象的top属性

论坛系统中左右两列的框架集结构便于浏览者导航,但同时也使得浏览者的工作区域变小。浏览者希望必要的时候可以隐藏框架集中的某个框架,以使得其他相邻的框架占据尽可能大的面积,如图上机4.2所示。

图上机4.2 框架首页

现在希望在tool.html页面中放置一个自定义命令按钮,单击此按钮能让左侧框架隐藏,再次单击此按钮能让左侧框架恢复显示。

左侧框架隐藏的实现方式为将它所占据的宽度设为0像素,左侧框架恢复显示的实现方式为将它所占据的宽度还原为原来的宽度。

(1)分别创建index.html、tool.html、nav.html、content.html 4个网页文档。

(2)index.html将作为实现框架集的主页面,编写框架集代码如下:

(3)为nav.html、content.html页面编写一些模拟的内容。(www.xing528.com)

(4)在tool.html页面中编写如下代码:

(5)在浏览器中运行框架集主页面index.html,效果如图上机4.3所示。

图上机4.3 框架集主页面

(6)单击“隐藏导航栏”按钮后,效果如图上机4.4所示。

图上机4.4 隐藏导航栏

(7)单击“显示导航栏”按钮后,效果如图上机4.5所示。

图上机4.5 显示导航栏

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈