html嵌套iframe标签,点击左侧导航菜单,在右侧动态显示页面

最新推荐文章于 2024-08-18 21:47:24 发布

大胖东

最新推荐文章于 2024-08-18 21:47:24 发布

阅读量2k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_42583263/article/details/125090464

版权

HTML iframe 导航菜单动态加载网页内容

关键词由CSDN通过智能技术生成

HTML 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

html嵌套iframe标签,点击左侧导航菜单,在右侧动态显示页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <style type="text/css">
        .main_left{
            width: 10%;
            height: 100%;
            float:left;
            cursor:pointer;
        }
        .main_right iframe{
            width: 80%;
            height: 450px;
        }
    </style>
</head>
<body>
<div>
    <div class="main_left">
        <ul>
            <li><a href="http://www.w3school.com.cn/" target="iframe_a">w3c school</a></li>
            <li><a href="https://www.csdn.net/" target="iframe_a">CSDN</a></li>
            <li><a href="https://www.cnblogs.com/" target="iframe_a">博客园</a></li>
            <li><a href="http://www.ximalaya.com/" target="iframe_a">喜马拉雅</a></li>
            <li><a href="https://jx.tmall.com/" target="iframe_a">天猫</a></li>
            <li><a href="http://www.ctrip.com/" target="iframe_a">携程</a></li>
        </ul>
    </div>
    <div class="main_right">
        <iframe src="http://www.w3school.com.cn/" name="iframe_a" frameborder="1" width="600" height="400">
            <div>欢迎测试！</div>
        </iframe>
    </div>
</div>
</body>
</html>