HTML用两种方式实现将超链接内容显示到当前页面
程序员文章站
2022-04-29 17:46:32
...
HTML用两种方式实现将超链接内容显示到当前页面
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>