iframe框架的应用

目标:后台系统,点击侧栏菜单后,右边div的要显示对应的内容。就是说,每选一下左边的菜单,右边的内容都要变化。

方法:使用iframe框架。

 第一步:在需要展示的div中写iframe:

<iframe src=“要插入的html文件.html” name="iframe(任意取名)" width=420 height=330 frameborder=0 scrolling=auto>如果浏览器不支持iframe框架,会向用户显示这里的文字</iframe>

第二步:在相应的li中写:

<li><a href="要显示的html文件.html" target="iframe的name">项目管理</a><iframe>

 最后成型的代码:

 

另外一个更加清晰简单的实现:

<html> 
<body> 
<a href= "1.html " target= "iFrame1 "> page1 </a> <br/> 
<a href= "2.html " target= "iFrame1 "> page2 </a> <br/> 
<a href= "3.html " target= "iFrame1 "> page3 </a> <br/> 
<a href= "4.html " target= "iFrame1 "> page4 </a> <br/>

<div id= "iFrame1 " style= "position:absolute; left:220px; top:200px; z-index:18 "> 
<iframe name= "iFrame1 " width=542 height=615 src= "1.html " scrolling= "auto " frameborder= "0 "> </iframe> 
</div>


</div> </body> 
</html>

 

posted @ 2017-05-10 21:28  SingSingaSong  阅读(516)  评论(0编辑  收藏  举报