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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/diligent_lee/article/details/82013782

1. 直接使用超链接

在这里要用到 iframe 标签,将 target 指向 iframename 属性。

关键代码:

<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>
展开阅读全文

没有更多推荐了,返回首页