HTML之实现可隐藏式导航栏

最新推荐文章于 2025-04-26 10:45:42 发布

你的大数据学长

最新推荐文章于 2025-04-26 10:45:42 发布

阅读量1.3w

点赞数 9

分类专栏： HTML 文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_43198568/article/details/104332343

版权

HTML之实现可隐藏导航栏

预计目标
部分代码展示
关键代码解释
- frame框架用法
- hideOrDisplayNavFrame()函数解释
结果展示

预计目标

论坛系统中左右两列的框架集结构便于浏览者导航，但同时也使得浏览者的工作区域变小。浏览者希望必要的时候可以隐藏框架集中的某个框架，以使得其他相邻的框架占据尽可能打的面积，如下图所示。现在希望在 tool.html 页面中放置一个自定义命令按钮，单机此按钮能让左侧框架隐藏，再次单击此按钮能让左侧框架恢复显示。
在这里插入图片描述

部分代码展示

话不多说，先上代码，完整代码可在我的GitHub中找到，链接在此
index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架的属性</title>
</head>
<frameset id="myset" cols="150px, *">
    <frame src="nav.html" name="leftFrame" scrolling="yes