如何使用frame框架，将左边视为导航栏，右边作为链接界面

在浏览网页时，我们经常会看到一个导航条，当点击导航条上的项目时，相应网页会在显示区域变换显示。那么如何将一个界面中，左边设置为导航栏，点击项目链接，则右边显示相应的内容呢？使用frameset框架，并且设置链接标签<a>的target属性即可。

首先我们使用frame将主界面划分为3块，具体代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>框架</title><!--框架 注意不要放在body中--><frameset rows="20%,80%" noresize="noresize" ><frame src='top.html' name='top'/><frameset cols="20%,70%"><frame src='index.html' name="left"/><frame src="content.html" name='right'/></frameset></frameset></head>
</html>

效果如图：框架用红色以标出。

要使左导航栏index与头部的导航栏top中的项目在右侧content区域显示，则需要在使用<a>链接时，使用target属性，设置链接显示的位置，代码如下：

左导航栏index.html中添加：

<a href='a.html' target="right">首页</a>
<a href='b.html' target="right">新闻</a>

头部导航栏top.html中添加：

<a href="user.html" target="right">个人中心</a>

则左导航栏index与头部的导航栏top中的项目可以在右侧content区域显示。

如何使用frame框架，将左边视为导航栏，右边作为链接界面相关推荐

【Android项目实战 | 从零开始写app (六) 】用TabLayout+ViewPager搭建App 框架主页面底部导航栏
本篇实现效果: 搭建app框架的方式有很多,本节主要用TabLayout+ViewPager搭建App框架,这种方式简单易实现,在主页中加载Fragment碎片,实现不同功能页面的切换效果图如下: 文 ...
html导航栏点击不能跳转,无法单击导航栏中的链接CSS HTML
不确定是否允许您链接您的网站,但是如果允许. 因此,我可以将所有链接悬停在导航栏中,但我无法点击它们,并且S的图片是可移动的,但无法点击,我做错了什么?无法单击导航栏中的链接CSS HTML Nick ...
关闭/开启“此电脑”左边的导航栏win10
这里按照步骤点击,即可出现右边的导航栏. 操作完成之后就出现左边导航栏了
用framest框架实现左边点击，右边显示
1,条件: <frametest>标签 .main.jsp等页面.退出登录时的target细节. 2.代码如下: 首页: <frameset rows="10%,*&qu ...
JFTabBar android强大的底部导航栏框架（微信底部导航栏效果）
TabBar这个名字相信很多学过一点IOS程序员都知道它是用来干嘛的,但本人也并非擅长开发IOS程序员,只是略懂略懂....这是一个很强大的TabBar,可满足很多需求.用起来也非常简单,在oncre ...
asp.net mvc项目中遇到的古怪的问题，（项目中有frame框架）
大致是这样的,整个项目分上,左,右三个框架, 左侧是导航栏,根据部门id不同在右框架显示不同的部门人员信息问题来了, 由于左侧是ajax无刷新树导航,所以按照mvc的原则,添加一个新路由大致为 ro ...
Android肝帝战纪之基于上篇单Activity+多Fragment框架，开发电商式导航栏，多Fragment切换
电商式导航栏,多Fragment切换本文默认在已经搭建好的框架上进行开发点此链接到上一篇基础框架的搭建界面构思示意图设计思路在底部的LinearLayout中添加相应的图标,然后设置tag绑 ...
学完css，做了一个csdn导航栏（一步一步做csdn导航栏，内容满满）
学完css,做了一个csdn导航栏,内容满满步骤 1.导航栏框架 2.导航栏左边部分 3.导航栏中间部分 4.导航栏右边部分 5.搜索框聚焦和用户头像简介信息展示知识点完整代码番外:本来打算做 ...
导航框架式html播放器的实现以及导航栏的自动更新脚本实现
本人对HTML并没有太多的使用,都是现用现查.今天想要实现一个HTML播放器来播放电脑本机存放的视频文件.经过查资料完成一个简单的导航框架式的HTML播放器以及其导航栏的自动跟新脚本. 导航框架式HT ...

如何使用frame框架，将左边视为导航栏，右边作为链接界面

如何使用frame框架，将左边视为导航栏，右边作为链接界面相关推荐

最新文章

热门文章