前言:平时用的后台功能模块菜单切换,其原理是:iframe的target属性与a标签的name属性关联使用,实现的功能菜单切换,实现想要的后台效果。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe的target属性与a标签的name属性关联使用</title> <style> ul{ float: left; margin-right: 10px; } ul li{ list-style: none; display: block; } ul li a{ padding-left: 10px; text-decoration: none; } .iframe{ float: left; } </style> </head> <body> <!--a标签--> <h2>作业列表后台</h2> <ul> <li class="item">1<a href="http://www.php.cn/blog/detail/13700.html" target="main">默写HTML文档的基本结构</a></li> <li class="item">2<a href="http://www.php.cn/blog/detail/13702.html" target="main">实例演示无序列表的基本使用</a></li> <li class="item">3<a href="http://www.php.cn/blog/detail/13704.html" target="main">实例演示表格的用法以及行列合并的应用</a></li> <li class="item">4<a href="http://www.php.cn/blog/detail/13712.html" target="main">实例演示表单以及常用控件元素的使用</a></li> </ul> <!--iframe框架--> <iframe srcdoc="<h1>作业列表后台</h1>" frameborder="1" id="iframe" width="800" height="600" name="main" ></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
以上是手写简单代码案例,本地具体运行效果截图如下:
要点总结:
a标签给属性target="xxx ",其中xxx在遵守命名规则的情况下可随意取名,且可以生成多个a标签
iframe标签的name="xxx"必须和关联a标签的target属性相同
iframe标签可给框架单独设置边框(frameborder)大小 、框架宽度(width)、框架高度(height)