zoukankan      html  css  js  c++  java
  • 如何让html引用公共布局(多个html文件公用一个header.html和footer.html)

    如何实现多个.html静态页,引用同一个header.html和footer.html文件?

    直接上代码:

    公共头部文件:header.html

    //不用写标准的html文档格式
    <div> 
         头部内容
    </div>

    公共尾部文件:footer.html

    //不用写标准的html文档格式
    <div> 
         页脚内容
    </div>

    js文件:

    当前方法:通过load()函数,引入公共头部和尾部文件; 
    代码预览: 
    $(".headerpage").load("header.html"); 
    $(".footerpage").load("footer.html");

    html全部文件:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>demo演示</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
    <!-- 顶部导航 -->
    <div class="headerpage"></div>
    <!--顶部导航 over-->    
    
    <!--中部主体--> 
        <p>···代码省略···</p>
    <!--中部主体 over-->  
    
    <!--footer-->  
    <div class="footerpage"></div>
    <!--footer over-->
    
    <script src="js/jquery.min.js"></script>
    <script>
        $(function(){
            /*公共部分
             * 导航栏
             * footer CopyRight
             */
            $(".headerpage").load("header.html");
            $(".footerpage").load("footer.html");
        });
    </script>
    </body>
    </html>

    通过上面的描述,可以发现:

    在header.html和footer.html文件中,并非是标准的html文档格式!
    与此同时,通过index.html中的jQuery函数load()将上述的两个公共文件引入进来,从而形成一个完整的页面;
    并且,不会影响到其他页面对于公共文件的引用和使用;

    以上就是关于静态html文件,使用公共头部和尾部的解决办法之一。
  • 相关阅读:
    Windows进程/线程创建过程
    固件安全研究
    区块链安全研究的总结
    CoTreatAsClass一些注意事项
    Ring3 读取SSDT
    User Mode Scheduling
    首次异常和二次异常
    offer终于有着落了
    AtomBombing
    Retn
  • 原文地址:https://www.cnblogs.com/shine1234/p/12899579.html
Copyright © 2011-2022 走看看