|
1. 直接使用超链接
在这里要用到 iframe 标签，将 target 指向 iframe 的 name 属性。
关键代码：
查看任务1
2. 使用 JavaScript
这种方式不需要使用超链接，而是定义一个标签，然后标签中用 js 响应鼠标点击事件，在 js 中通过 window.open() 方式打开超链接以及打开的位置。
关键代码如下：
打开任务1
function func(obj){
var myFrame="mainFrame" + obj.value;
window.open(obj.title,myFrame);
}
3. 运行效果：
4. 完整代码：
4.1 方式1的完整代码
#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;
}
用框架将任务1、任务2、任务3显示在一个页面中
查看任务1
查看任务2
查看任务3
4.2 方式2 的完整代码
function func(obj){
var myFrame="mainFrame" + obj.value;
window.open(obj.title,myFrame);
}
#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;
}
用框架将任务1、任务2、任务3显示在一个页面中
打开任务1
打开任务2
打开任务3
|