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

1. 直接使用超链接

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

关键代码:

<a href="task1.html" target="mainFrame1">查看任务1a>
<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. 运行效果:

HTML用两种方式实现将超链接内容显示到当前页面_第1张图片

4. 完整代码:

4.1 方式1的完整代码


<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">查看任务1a>li><br />
						<li><a href="task2.html" target="mainFrame2">查看任务2a>li><br />
						<li><a href="task3.html" target="mainFrame3">查看任务3a>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 的完整代码


<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">打开任务1li><br />
						<li title="task2.html" onclick="func(this)" value="2">打开任务2li><br />
						<li title="task3.html" onclick="func(this)" value="3">打开任务3li><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>

你可能感兴趣的:(HTML,JavaScript,超链接,HTML)