博客列表 >iframe与a标签的通过target属性关联使用-2019年07月03日 22点40分

iframe与a标签的通过target属性关联使用-2019年07月03日 22点40分

高明博客
高明博客原创
2019年07月12日 15:43:46845浏览

前言:平时用的后台功能模块菜单切换,其原理是: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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


以上是手写简单代码案例,本地具体运行效果截图如下:


127.png


要点总结:

  1. a标签给属性target="xxx ",其中xxx在遵守命名规则的情况下可随意取名,且可以生成多个a标签

  2. iframe标签的name="xxx"必须和关联a标签的target属性相同

  3. iframe标签可给框架单独设置边框(frameborder)大小 、框架宽度(width)、框架高度(height)

 




声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议