几个html页面怎么加载相同的头尾部

几个html页面有共同的div的头部,怎么把这个div提出来,加载(需要传参)

如下是头部:

 <div class="container" id="top">
    <div class="row">
        <div class="col-md-12">
            <!--加入导航条标题-->
            <div class="navbar navbar-default" role="navigation">
                 <div class="navbar-header">
                     <a href="##" class="navbar-brand">教务信息查询系统(管理员)</a>
                 </div>
                <form action="##" class="navbar-form navbar-right" rol="search">
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" style="margin-right: 20px; ">
                            <span id="user"></span>
                            <span class="glyphicon glyphicon-user"></span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation" class="disabled">
                                <a role="menuitem" tabindex="-1" href="#">
                                    <span class="glyphicon glyphicon-cog pull-right"></span>
                                    修改个人信息
                                </a>
                            </li>
                            <!-分割线--->
                            <li role="presentation" class="divider"></li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="../login.html">
                                    <span class="glyphicon glyphicon-off pull-right"></span>
                                    注销
                                </a>
                            </li>
                        </ul>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

这里有个参数是需要写入的

12个回答

有很多种方法,从前往后一步一步来吧.
第一种JS的办法,楼上已经有了.不再赘述.

第二种SSI,这是一种在apache 或 nginx上的使用的方法,前提是你的代码会进过apache或nginx,IIS应该也行,但我没在IIS上用过.
类似这样的注释代码:

 <!--#include virtual="/include/header.html"-->

第三种则是通过预编译的方式,使用模板语言来合成最终输出的HTML.例如我现在用的art-template

{{include "./header.art"}}

类似的模板语言还有很多,例如jade,ejs等.

这三种一种是把计算放到用户最终的浏览器上,第二种是把计算放在服务器上,第三种是把计算放在开发或应用部署的机器上.

把头部提出来,在其他页面使用include标签包进去就行了

 $('#xxxxx').load('xxxxx.html',function(html){
//自己替换xxxxx容器内的dom对象为你需要的参数
})

要么服务器端改动态页,可以在load的时候直接传递参数

单独提出,includ引入

单独写一个页面,然后在其他页面里用includ引用

m0_37928829
Forsaken12345 怎么引用
2 年多之前 回复

建议使用Pjax技术,可以抽取出固定的头尾部分,然后动态加载内容

鉴于以上的观点,就说下另一种方式吧。不知道楼主知不知道thinkphp 框架,里面的公共的html是完全可以拿出来的,不需要什么插件引入

引用Jquery的
$('#xxxxx').load('xxxxx.html',function(html){
//自己替换xxxxx容器内的dom对象为你需要的参数
})

楼主,你这个问题后台随便弄个框架就解决了,写代码的时候写好注释就可以了,后台处理的时候嵌套框架,用框架自带方法就可以了

页面碎片,通过include引入

共12条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问