• 第一种，使用iframe标签
<iframe id="f2" name="f2" src='/templates/bianlan.html' width="100%" height="600" target="_self" style="border: none;background-color: rgba(204, 202, 224, 0.6);"></iframe>
  • 第二种，script标签引入（需要jquery）

使用这种方法最好是直接对body引入，不要对其他标签引入，如果有js那么需要把js全部移动到引入的页面中，原页面不能有，否则会出现点击事件不起作用

<script>
    $("body").load("/templates/bianlan.html");
</script>
  • 第三种，使用<object>标签
<object style="border:0" type="text/x-scriptlet" data="/templates/bianlan.html" width=100% height=600></object>

推荐iframe比较简单，第二种需要做较多的调整，第三种比前两种都要好，但是页面比例需要自己调整

以下为代码

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!--    <link href="/templates/bianlan.html" type="text/html" rel="start">-->
    
    <script src="../static/js/adapter.js"></script> <!--rem适配js-->
    
    <link rel="stylesheet" href="../static/css/base.css"> <!--初始化文件-->
    <link rel="stylesheet" href="../static/css/menu.css"> <!--主样式-->

</head>
<body>
<div id="bianlan"></div>
<!--<iframe src="/templates/bianlan.html"></iframe>-->
<!--<iframe id="f2" name="f2" src='/templates/bianlan.html' width="100%" height="600" target="_self" style="border: none;background-color: rgba(204, 202, 224, 0.6);"></iframe>-->

<script>
    $("body").load("/templates/bianlan.html");
</script>
<!--<object style="border:0" type="text/x-scriptlet" data="/templates/bianlan.html" width=100% height=600></object>-->
<!--<script type="text/html" src="/templates/bianlan.html"></script>-->
chengg
<script src="../static/js/menu.js"></script> <!--控制js-->
</body>
</html>

bialan.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript可展开隐藏的侧边栏下拉菜单DEMO演示</title>

</head>
<body>
<div style="text-align:center;clear:both">

</div>
<div id="menu">
    <!--隐藏菜单-->
    <div id="ensconce">
        <h2>
            <img src="../static/picture/show.png" alt="">
            后台管理系统
        </h2>
    </div>

    <!--显示菜单-->
    <div id="open">
        <div class="navH">
            后台管理系统
            <span><img class="obscure" src="../static/picture/obscure.png" alt=""></span>
        </div>
        <div class="navBox">
            <ul>
                <li>
                    <h2 class="obtain">员工管理<i></i></h2>
                    <div class="secondary">
                        <h3>添加员工</h3>
                        <h3>删除员工</h3>
                        <h3>查看所有</h3>
                        <h3>启用or禁用</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">南京景点<i></i></h2>
                    <div class="secondary">
                        <h3>栖霞寺</h3>
                        <h3>夫子庙</h3>
                        <h3>海底世界</h3>
                        <h3>中山陵</h3>
                        <h3>乌衣巷</h3>
                        <h3>音乐台</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">上海景点<i></i></h2>
                    <div class="secondary">
                        <h3>东方明珠</h3>
                        <h3>外滩</h3>
                        <h3>豫园</h3>
                        <h3>文庙</h3>
                        <h3>世博园</h3>
                        <h3>田子坊</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">深圳景点<i></i></h2>
                    <div class="secondary">
                        <h3>华侨城</h3>
                        <h3>观澜湖</h3>
                        <h3>世界之窗</h3>
                        <h3>东门老街</h3>
                        <h3>七娘山</h3>
                        <h3>光明农场</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">广州景点<i></i></h2>
                    <div class="secondary">
                        <h3>白云山</h3>
                        <h3>长隆</h3>
                        <h3>黄花岗公园</h3>
                        <h3>中山纪念堂</h3>
                        <h3>华南植物园</h3>
                        <h3>南沙湿地公园</h3>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>

# html # elementui # vue.js
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟
cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟