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

HTML用两种方式实现将超链接内容显示到当前页面1. 直接使用超链接在这里要用到iframe标签，将target指向iframe的name属性。关键代码：&amp;amp;amp;lt;a href=&amp;amp;quot;task1.html&amp;amp;quot; target=&amp;amp;quot;mainFram

柯西没科气

39521人浏览 · 2018-08-24 10:41:35

柯西没科气 · 2018-08-24 10:41:35 发布

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>

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport