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
    评论
专栏目录
前端输入url到页面展示
不会唱杰伦
10-26 361
从浏览器输入url到页面显示的步骤 输入url 域名解析 三次握手请求建立tcp连接 浏览器构建http请求报文，请求报文通过tcp协议传送到服务器指定的端口发送http请求（请求行、请求头、请求体） 服务器处理http请求并返回响应报文（状态码、响应头、响应正文） 浏览器解析html文档，构建DOM树，CSSOM树，构架渲染树，定位页面元素，绘制页面 四次挥手断开tcp连接 01、输入url 当我们开始在浏览器中输入网址的时候，浏览器其实就已经在智能的匹配可能的 url 了，他会从历史记录，书签等地方
JavaScript判断页面加载完之后再执行预定函数的技巧
11-26
JavaScript 脚本语言的执行，是需要触发的。一般的做法就是在网页中，直接编写几个函数，有的在代码被加载的时候就被浏览器处理，或者使用类似下面的代码来触发实现函数的相关功能。 上面代码的意思就是，当鼠标点击 id 为 link 的元素的时候，就触发了它的 onclick 事件，然后执行使用 JavaScript 定义的 fun 函数。这样的做法肯定是很不合理的，因为触发操作直接写进了 HTML 结构里面，内容和行为没有隔离开，对日后的二次开发或者修改带来不便。 需要注意的是，当事件处理与对应元素绑定起来的时
html设置可编辑状态,HTML5 - 使某个页面元素或整个页面可编辑
weixin_33992214的博客
05-30 3966
1，把任何元素的contenteditable属性设置成true，点击即可以编辑该元素的内容contenteditable="true">你可以编辑这段文本2，也可以使用js来动态的开启和关闭编辑功能//让元素可以编辑function startEdit(){var element = document.getElementById("editableDiv");element.conten...
HTML链接：带超链接的网页
最新发布
m0_73614626的博客
06-06 696
的含义取于船上的锚，船把锚沉在水底后，如果船随水飘移了，只要一拉锚的锁链就会回到抛锚的位置。页面，链接包含页面内导航链接和跳转其他网页的链接。属性是超链接最重要的属性，它用于指定超链接目标的 URL。超链接是网页互连的核心，网页之间通过超链接连接在一起。为了顺利完成以上网页的制作，请大家认真阅读以下内容。，这样做可以调起邮箱应用，发送邮件到对应地址。属性指定了超链接的目标，本例中即跳转到百度。，所以在点击之后，将在新标签中打开链接。本关的任务是编写一个带超链接的。属性，使得链接在新标签中打开；
html--页面超链接<a>标签
Economic_shark的博客
09-19 703
<a>标签的基本语法格式图像和超链接的组合锚记标签(链接到本页面)电子邮件链接
html函数中怎么写超链接,如何调用html超链接中的函数
weixin_29309475的博客
05-30 513
好的，我已经在这里搜索了很多问题，并且我已经从中获得了我所能做到的，但它似乎仍然没有工作。 (我是相当新的的JavaScript/jQuery的。)如何调用html超链接中的函数var showPhotography = function() {$(".design").hide();$(".film").hide();$(".web").hide();}var showDesign = func...
HTML超链接、内嵌框架
橘猫吃不胖的博客
10-08 1255
HTML超链接、内嵌框架1 超链接1.1 什么是超链接1.2 超链接标签< a >1.3 通过超链接实现“锚点”2 内嵌框架标签 1 超链接 1.1 什么是超链接 当用户点击文字、图像、视频等页面元素时，页面会发生跳转，则这些页面元素就是超链接 1.2 超链接标签< a > 格式： <a href="url地址" target="页面打开的方式">页面元素(文字、图像、音频、视频)</a> 属性 含义 href 值是要跳转的页面的地址，通常
零基础学习WEB前端开发(六)：HTML超链接标签
陶小桃Blog
10-22 938
一、超链接 二、用法及分类 基本语法 外部链接 内部链接 空连接 下载链接 其他元素链接 锚点链接 一、超链接 HTML使用标签 <a>来设置超文本链接。 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 在标签<a> 中使用了href属性来描述链接的地址。 默认情况下，链接将以以下形式出现在浏览器中： 一个未访问过的链接
HTML超链接
weixin_45409334的博客
10-17 401
HTML超链接 一.如何在HTML文件里创建超链接 <html> <body> <p> <a href="../asdocs/html_tutorials/humor02.html">这是一个链接</a> </p> <p> <a href="http://www.blabla.cn" target=_blan...
html怎样点击超链接在指定div显示,是否可以仅在特定DIV中设置超链接样式
weixin_35414260的博客
06-10 1663
我正在制作纯粹的javascript webapp(无JQuery)，它会在运行时生成所有内容。没有要加载的CSS文件，所有样式都由J​​S生成。例如：function newParagraph(content,x,y,w,h){var obj = document.createElement("div");obj.style.position = "absolute";obj.style.lef...
JS实现在一个页面单击多个链接时，对应页面显示在本页面中的指定区域
weixin_46085155的博客
11-24 1405
制作选项卡式导航——在一个页面单击多个链接时，对应页面显示在本页面中的指定区域中 tabbedNavigation.html 选项卡式导航 首页 下载中心 产品介绍 会员注册与登录 联系我们 仿淘宝网站的导航效果。此方法有几个优点：1、根据字数自适应项目长度-padding 2、不同的项目使用不同的颜色来区分 3、需要使用到j
php点击链接显示内容,web - php 实现同一条链接点击只显示一次内容
weixin_42285866的博客
03-24 180
有这样一个需求，一个列表页上有n多的链接地址，要求打开显示一次内容后就失效，(注意：所有的内容都是通过接口获得的，需要proxy对方生成的页面，不可直接暴露对方url避免被分享)。使用PHP实现。请高手现身帮帮忙，谢谢。注意，这个链接打开一次是指不能复制分享，而不是说，换台电脑又能打开了。回复内容：有这样一个需求，一个列表页上有n多的链接地址，要求打开显示一次内容后就失效，(注意：所有的内容都是通...
4：在我们自己的网站页面加载别人网站的内容？
weixin_45651609的博客
04-26 846
答： iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容。
php中让链接固定显示,ajax实现点击不同的链接让返回的内容显示在特定div里
weixin_31002379的博客
03-27 134
过ajax实现在一个web页面点击不同的链接，然后将返回的结果显示在该页面固定的p里/* 以下代码通过ajax实现在一个web页面点击不同的链接，然后将返回的结果显示在该页面固定的p里。 */Insert title herevar http_request = false;function createRequest(url,objID){http_request = false;if(wind...
点击不同链接，显示同一个页面下的不同页面
weixin_30410999的博客
12-23 845
就是点击链接，让后台传个参数，根据这个参数来做不同的判断 var extend_op = '{$jump}'; //获取参数使点击注册跳转到注册页面 if(extend_op == 'reg'){ $("#do_reg").click(); }; 此段代码放在JS最后 转载于:https://www.cnblogs....
html连接不覆盖,html – >中的链接不会覆盖整个表面
weixin_39889788的博客
06-09 158
我正在设计一个导航栏.代码如下所示：Overview...在css中,我有以下代码用于li元素：ul.topnav li{cursor:pointer;list-style-type:none;display:inline;float:left;background-clip:padding-Box;text-align:center;width:139px;background-repeat:r...
怎么用html链接到首页,Web前端
weixin_39759182的博客
06-17 345
课程主题HTML5基础、CSS3基础、切图、综合项目：小U课堂、HTML5进阶、 CSS3进阶、综合项目：小U商城、综合项目：响应式布局实战项目PC端项目：小U课堂静态页面布局、移动端项目：小U商城移动端项目、响应式项目：小U商城后台管理系统培养方向1.熟练使用前端开发IDE:vscode编辑器；2.掌握HTML5基础和HTML5进阶中的常用标签；3.掌握CSS基本语法和文字字体属性；4.掌握盒模...
html 链接分析,分析首页链接：/和/index.html
weixin_39974400的博客
06-10 1164
上个周末，一个网友和我分享自己做优化的经验，其中一点说到：在做首页链接的时候，喜欢把一部分网址用/index.html网址而不是/结尾。因为这样蜘蛛可以爬取两次。网友的这段话，有很多我不赞成的地方。那么首页链接是/还是/index.html好？首先，用http://www.*****.com/index.html作为首页链接，等于你用你的一个一级页面index.html和人家的网站跟目录/相比，这...
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、付费专栏及课程。

余额充值