当前位置: 首页 > news >正文

html导航栏点击显示该栏内容,点击导航栏,实现下方内容改变

经常看到网页当中,上方一个导航栏,下面有内容,点击导航栏菜单,就可以改变下方的内容,今天查了查实现方法,本人用的frameset+frame实现的,实现方法简单,容易理解。废话不多说,上代码:

Index.html

1

2

3

index

4

5

6

7

8

9

说明:rows表示你要把网页上下分栏,cols表示左右分栏,rows后面"25%,*"有两项表示分成上下两栏,25%表示上栏占整个网页的25%,后面的*表示下栏占全部,如果第二个也出现分数,表示下栏占网页的百分比。这个rows当中只有两项,表示分两栏,3项表示分三栏,比如“25%,50%,25%”,以此类推。

frame标签表示分的栏数,和上面的rows里面的数量对应,分别给分的栏设置一个name,一般为top,botton,left,right,....src表示这一栏当中要显示的页面内容。

Top.html

1

2

3

top

4

5

6 1

7 2

8

9

top.html-------使用a标签的target属性,点击当前链接之后,要转向的栏的名称,使用botton,因为index。html当中,有name为botton的frame,所以表示点击1之后,会把1.html当中的内容显示到名称为botton的frame当中,由此实现了在上方top当中点击链接,在下方botton当中改变内容。

Botton.html

1

2

3

botton

4

5

6 show word.7

8

1.html

1

2

3

1

4

5

6 17

8

2.html

1

2

3

2

4

5

6 27

8

相关文章:

  • html 安卓 web 页面布局,webApp 页面布局
  • 学 HTML5 开发 零基础 经验,零基础能不能学会HTML5开发技术?
  • html表示dom怎么设置,{HTML5}DOM 和 CSS 操作-第二节-设置元素及内容
  • 中职计算机应用基础教案1,中职计算机应用基础教案版.ppt
  • 计算机未来发展趋势多级化,计算机的未来发展趋势
  • 学城市轨道和计算机专业哪个好,2019湖南考生学城市轨道交通通信信号技术专业选什么大学好?...
  • 我查学生学的电子计算机要,计算机网络及应用
  • HTML项目做什么好,node适合做什么项目
  • 微型计算机原理8255a考研题,上海交通大学1999年硕士研究生入学考试试题 微型计算机原理与应用(含数字电路)...
  • html5 background-size,CSS3属性background-size使用指南
  • 对计算机应用的,计算机应用技术对企业信息化作用
  • 计算机学院贺凤,计算机学院举办2018年暑期社会实践宣讲会
  • 计算机内存管理的书籍,计算机基础-内存管理介绍
  • 中职类学校计算机教学改革,中职计算机基础课程教学改革浅论 教育部关于中职学校教学改革...
  • 六盘水师范学院计算机,【六盘水师范学院】全国大学生一级计算机考试
  • 【140天】尚学堂高淇Java300集视频精华笔记(86-87)
  • ComponentOne 2017 V2版本正式发布
  • JAVA SE 6 GC调优笔记
  • Java应用性能调优
  • MySQL-事务管理(基础)
  • ng6--错误信息小结(持续更新)
  • PHP 小技巧
  • PyCharm搭建GO开发环境(GO语言学习第1课)
  • SpiderData 2019年2月25日 DApp数据排行榜
  • UEditor初始化失败(实例已存在,但视图未渲染出来,单页化)
  • 从地狱到天堂,Node 回调向 async/await 转变
  • 和 || 运算
  • 看域名解析域名安全对SEO的影响
  • 如何使用Mybatis第三方插件--PageHelper实现分页操作
  • 如何在GitHub上创建个人博客
  • 通信类
  • 微服务入门【系列视频课程】
  • 我的业余项目总结
  • 携程小程序初体验
  • 主流的CSS水平和垂直居中技术大全
  • #NOIP 2014# day.1 T2 联合权值
  • (1)(1.13) SiK无线电高级配置(五)
  • (31)对象的克隆
  • (4)STL算法之比较
  • (8)STL算法之替换
  • (arch)linux 转换文件编码格式
  • (floyd+补集) poj 3275
  • (Python) SOAP Web Service (HTTP POST)
  • (草履虫都可以看懂的)PyQt子窗口向主窗口传递参数,主窗口接收子窗口信号、参数。
  • (简单有案例)前端实现主题切换、动态换肤的两种简单方式
  • (十)T检验-第一部分
  • (十三)Flask之特殊装饰器详解
  • (未解决)macOS matplotlib 中文是方框
  • (一)80c52学习之旅-起始篇
  • (转载)在C#用WM_COPYDATA消息来实现两个进程之间传递数据
  • .NET DataGridView数据绑定说明
  • .NET Standard 支持的 .NET Framework 和 .NET Core
  • .netcore 6.0/7.0项目迁移至.netcore 8.0 注意事项
  • .NET下的多线程编程—1-线程机制概述
  • @RequestBody的使用