HTML用两种方式实现将超链接内容显示到当前页面

最新推荐文章于 2024-06-06 01:11:31 发布
最新推荐文章于 2024-06-06 01:11:31 发布
阅读量3.9w 收藏 100
点赞数 23
分类专栏： HTML 文章标签： HTML JavaScript 超链接
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/diligent_lee/article/details/82013782
版权

1. 直接使用超链接

在这里要用到 iframe 标签，将 target 指向 iframe 的 name 属性。

关键代码：

<a href="task1.html" target="mainFrame1">查看任务1</a>
<iframe name="mainFrame1" style="width: 100%; height: 100%;">

2. 使用 JavaScript

这种方式不需要使用超链接，而是定义一个标签，然后标签中用 js 响应鼠标点击事件，在 js 中通过 window.open() 方式打开超链接以及打开的位置。

关键代码如下：

<li title="task1.html" onclick="func(this)" value="1">打开任务1</li>
function func(obj){
	var myFrame="mainFrame" + obj.value;
	window.open(obj.title,myFrame);
}

3. 运行效果：

运行效果

4. 完整代码：

4.1 方式1的完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#all{
				margin: 0 auto;
				width: 1300px;
			}
			
			#top{
				margin: 0 atuo;
				line-height: 150px;
				font-family: 楷体;
				font-size: 24px;
				width: 1300px;
				height: 150px;
				text-align: center;
				border-bottom: solid 5px black;
			}
			
			#left{
				width: 150px;
				height: 800px;
				border-right: solid 5px black;
				text-align: center;
				float: left;
			}
			
			#left ul{
				list-style-type: none;
			}
			
			#right{
				width: 1000px;
				height: 750px;
				float: left;
			}
			.my_class{
				width: 1000px;
				height: 250px;
			}			
			*{
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div id="all">
			<div id="top">用框架将任务1、任务2、任务3显示在一个页面中</div>
			<div id="left">
				<div style="height: 50px; width: auto;"></div>
					<ul>
						<li><a href="task1.html" target="mainFrame1">查看任务1</a></li><br />
						<li><a href="task2.html" target="mainFrame2">查看任务2</a></li><br />
						<li><a href="task3.html" target="mainFrame3">查看任务3</a></li><br />
					</ul>
			</div>
			<div id="right">
				<div id="div1" class="my_class"><iframe name="mainFrame1" style="width: 100%; height: 100%;"></iframe></div>
				<div id="div2" class="my_class"><iframe name="mainFrame2" style="width: 100%; height: 100%;"></iframe></div>
				<div id="div3" class="my_class"><iframe name="mainFrame3" style="width: 100%; height: 100%;"></iframe></div>			
			</div>
		</div>
	</body>
</html>

4.2 方式2 的完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" lang="java">
			function func(obj){
				var myFrame="mainFrame" + obj.value;
				window.open(obj.title,myFrame);
			}
		</script>
		
		<style>
			#all{
				margin: 0 auto;
				width: 1300px;
			}
			
			#top{
				margin: 0 atuo;
				line-height: 150px;
				font-family: 楷体;
				font-size: 24px;
				width: 1300px;
				height: 150px;
				text-align: center;
				border-bottom: solid 5px black;
			}
			
			#left{
				width: 150px;
				height: 800px;
				border-right: solid 5px black;
				text-align: center;
				float: left;
			}
			
			#left ul{
				list-style-type: none;
			}
			
			#right{
				width: 1000px;
				height: 750px;
				float: left;
			}
			
			.my_class{
				width: 1000px;
				height: 250px;
				
			}
						
			*{
				padding: 0;
				margin: 0;
			}
									
		</style>
	</head>
	<body>
		<div id="all">
			<div id="top">用框架将任务1、任务2、任务3显示在一个页面中</div>
			<div id="left">
				<div style="height: 50px; width: auto;"></div>
					<ul>
						<li title="task1.html" onclick="func(this)" value="1">打开任务1</li><br />
						<li title="task2.html" onclick="func(this)" value="2">打开任务2</li><br />
						<li title="task3.html" onclick="func(this)" value="3">打开任务3</li><br />
					</ul>
				</div>
			</div>
			<div id="right">
				<div class="my_class"><iframe name="mainFrame1" style="width: 100%; height: 100%;"></iframe></div>
				<div class="my_class"><iframe name="mainFrame2" style="width: 100%; height: 100%;"></iframe></div>
				<div class="my_class"><iframe name="mainFrame3" style="width: 100%; height: 100%;"></iframe></div>			
			</div>
		</div>	
	</body>
</html>
柯西没科气
关注
  • 23
    点赞
  • 踩
  • 100
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
JavaScript判断页面加载完之后再执行预定函数的技巧
11-26
JavaScript 脚本语言的执行，是需要触发的。一般的做法就是在网页中，直接编写几个函数，有的在代码被加载的时候就被浏览器处理，或者使用类似下面的代码来触发实现函数的相关功能。 上面代码的意思就是，当鼠标点击 id 为 link 的元素的时候，就触发了它的 onclick 事件，然后执行使用 JavaScript 定义的 fun 函数。这样的做法肯定是很不合理的，因为触发操作直接写进了 HTML 结构里面，内容和行为没有隔离开，对日后的二次开发或者修改带来不便。 需要注意的是，当事件处理与对应元素绑定起来的时
HTML 实现 点击按钮切换 整张界面 && 点击按钮切换局部界面
m0_63669388的博客
10-21 7095
本文详细介绍了在前端如何用button按钮实现页面切换的几种方法，包括a标签 重定向等等方法，并附有代码易于理解。
前端输入url到页面展示
不会唱杰伦
10-26 360
从浏览器输入url到页面显示的步骤 输入url 域名解析 三次握手请求建立tcp连接 浏览器构建http请求报文，请求报文通过tcp协议传送到服务器指定的端口发送http请求（请求行、请求头、请求体） 服务器处理http请求并返回响应报文（状态码、响应头、响应正文） 浏览器解析html文档，构建DOM树，CSSOM树，构架渲染树，定位页面元素，绘制页面 四次挥手断开tcp连接 01、输入url 当我们开始在浏览器中输入网址的时候，浏览器其实就已经在智能的匹配可能的 url 了，他会从历史记录，书签等地方
HTML链接：带超链接的网页
m0_73614626的博客
06-06 695
的含义取于船上的锚，船把锚沉在水底后，如果船随水飘移了，只要一拉锚的锁链就会回到抛锚的位置。页面，链接包含页面内导航链接和跳转其他网页的链接。属性是超链接最重要的属性，它用于指定超链接目标的 URL。超链接是网页互连的核心，网页之间通过超链接连接在一起。为了顺利完成以上网页的制作，请大家认真阅读以下内容。，这样做可以调起邮箱应用，发送邮件到对应地址。属性指定了超链接的目标，本例中即跳转到百度。，所以在点击之后，将在新标签中打开链接。本关的任务是编写一个带超链接的。属性，使得链接在新标签中打开；
html+js点击按钮在当前页面显示一个窗口
weixin_40944832的博客
01-11 1万+
用户信息 window.open 弹出新窗口的命令； 　　'page.html' 弹出窗口的文件名； 　　'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替； 　　height=100 窗口高度； 　　width=400 窗口宽度； 　　top=0 窗口距离屏幕上方的象素值； 　　left=0 窗口距离屏幕左侧的象素值； 　...
HTML 基础知识：HTML 链接
新华编程特战队
02-09 2513
本文介绍 HTML 中的链接、其实现、属性和类型。我们还将学习如何在 HTML 中使用不同的标签和元素作为链接。
零基础学习WEB前端开发(六)：HTML超链接标签
陶小桃Blog
10-22 935
一、超链接 二、用法及分类 基本语法 外部链接 内部链接 空连接 下载链接 其他元素链接 锚点链接 一、超链接 HTML使用标签 <a>来设置超文本链接。 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 在标签<a> 中使用了href属性来描述链接的地址。 默认情况下，链接将以以下形式出现在浏览器中： 一个未访问过的链接
网页特效，链接本页显示
yanmoulidelei的专栏
02-21 506
body{  font-size:9pt; color:#333333; line-height:140%;} #dhtmltooltip{ position: absolute; width: 150px; border: 2px solid black; padding: 2px; background-color: lightyellow; visibility: hidde
html超链接样式(四种不同状态)设置示例
09-28
HTML超链接是网页中至关重要的元素，用于引导用户浏览到其他页面或资源。在HTML中，我们使用`<a>`标签来创建超链接。而为了使超链接在不同的状态下呈现出不同的视觉效果，我们可以使用CSS（层叠样式表）来定制其样式...
一个链接按两种方式打开两个网址的方法
09-05
本文将详细解释如何通过JavaScript实现一个链接按两种方式打开两个网址。 首先，我们要了解HTML中的`<a>`标签，它是创建超链接的基础。通常，我们可以通过设置`href`属性来指定链接的目标URL，点击链接后，浏览器会...
HTML5鼠标悬停超链接显示图片特效.zip
09-25
这个名为"HTML5鼠标悬停超链接显示图片特效.zip"的压缩包包含了一个使用HTML5、CSS和jQuery实现的功能，即当用户将鼠标悬停在超链接上时，会显示相关的图片特效。这种效果可以提升网站的互动性和吸引力。 首先，...
Ext javascript建立超链接，进行事件处理的实现方法
10-30
通常有以下两种方法： 1. 使用`location.href`属性： ```javascript // 方法一: 通过修改当前窗口的URL来导航 location.href = '网址'; ``` 这种方法可以直接改变浏览器的地址栏，并跳转到指定的URL，无需创建HTML...
HTML5&CSS3网页制作：创建超链接.pptx
05-31
页面间超链接是指超链接指向当前页面以外的其他页面，单击该链接将完成页面之间的跳转。例如，在一个电商网站中，点击某个商品的链接将跳转到商品详情页面。 ### 锚点链接 锚点链接是指超链接指向页面内的某一个...
页面间嵌套的3种方法总结
qq_45682379的博客
07-08 1万+
1.为什么要复用页面 在很多的网站页面的header，footer都是复用的。 随便哪个网站：如哔哩哔哩官网 B站前面的导航栏（footer） 便是复用的，这块区域在整个网站的某些页面中是重复出现的，没使用复用前，最原始的方法就是把相同的代码复制粘贴到网站的每个页面，这样会使得我们整个网站占用代码的空间很大，而且出现大量出现冗余代码。 2.介绍三个页面嵌套的方法 1.通过iframe标签来为网页嵌套页面（JSP和HTML均适用）： 代码如下： <!DOCTYPE html> <html&
Web基础 HTML标签 六种超链接标签的使用方式
热门推荐
运维派大星
03-29 3万+
Web基础 HTML标签 六种超链接标签的使用方式 分别是：外部链接、内部链接、空链接、下载链接、网页元素链接、锚点链接的使用方式
html 超链接打开Excel,excel超链接打不开解决方法
weixin_33940469的博客
06-25 814
excel表格中的超链接打不开怎么办?当excel文档里面的超链接无法打开，提示以下错误，而经确认，用户对超链接的目的文档有完全控制权限。今天，学习啦小编就教大家如何解决问题!Excel超链接打不开解决方法如下：当excel文档里面的超链接无法打开，提示以下错误，而经确认，用户对超链接的目的文档有完全控制权限。以下提供该问题的解决办法1、打开开始菜单，在运行里输入regedit,回车2、在注册表中...
html如何链接excel文件,html链接到excel表格数据-怎么用html实现excel表格
weixin_39966020的博客
06-23 3006
在HTML5中如何读取Excel中的数据并且在火狐浏览器...将htm文档中的表格数据转换Excel表的具体步骤如下：一、第一步，打开需要转换的htm文档下来进入到编辑页面中，然后点击打开左上角件，如下图所示。二、第二步，接下来在弹出来的窗口中选择打开“另存为”，如下图所示。三、第三步，接下来在弹出来的窗口中点击打开“保存类型”，然后选择“Excel工作薄”，接下来点击保存即可，如下图所示。HTM...
HTML超链接
qq_43473027的博客
04-17 438
HTML超链接 在制作网页过程中，超链接是必不可少的。超链接是网页最基本的特征，利用超链接可以实现各个网页之间的跳转。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。超链接的实现方式有很多，比如文字，图像，地址等等。 类别 1.锚链接 用途：跳转到当前网页指定位置的一种超链接 2.跳转型链接 用途：跳转到某个指定的页面 3.功能性链接 用途：实现特殊功能的链接 链接形式 我们通过使用a标签在HTML中创建链接。 有两种使用a标签的方式： 1.通过使用href属性——创建指向另一个网页的链接
数据分析的核心技能和方法
最新发布
07-19
数据分析的核心技能和方法
html超链接跳转到当前页面
06-02
要实现在当前页面中跳转到指定位置，可以使用锚点的方式。具体操作如下： 1. 在当前页面中指定需要跳转到的位置，并在该位置添加一个锚点。例如，在需要跳转到的位置添加一个id为“target”的锚点，代码如下： ``` <div id="target">需要跳转到的位置</div> ``` 2. 在超链接中设置href属性为“#target”，即跳转到id为“target”的锚点。代码如下： ``` <a href="#target">跳转到需要跳转到的位置</a> ``` 这样，点击超链接时就可以在当前页面中跳转到指定位置了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值