写了一个头部导航栏的html
想在多个html页面中引用，请问怎么操作？
网上找了用标签 实际效果并不好 ， 导航栏中按钮下拉菜单无法完全显示
请问大牛们平时开发中怎么处理这个的
如图 ：
可以使用
html
的
import
这个功能
通过声明
<link rel="import">
来在页面中包含一个导入
具体可以看教程
可以向下面这样使用
warning.html
<div class="warning">
<style scoped>
h3 {
color: red;
}
</style>
<h3>Warning!</h3>
<p>This page is under construction</p>
</div>
<div class="outdated">
<h3>Heads up!</h3>
<p>This content may be out of date</p>
</div>
导入
<head>
<link rel="import" href="warnings.html">
</head>
<body>
...
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
// 从 warning.html 的文档中获取 DOM。
var el = content.querySelector('.warning');
document.body.appendChild(el.cloneNode(true));
</script>
</body>
1、可以用构建工具拼接，例如gulp， fis，
我之前用过gulp，大概是这样的
var headerfooter = require('gulp-headerfooter');
gulp.task("html", function() {
return gulp.src("src/template/*.html")
.pipe(headerfooter.header('src/headerfooter/header.html'))
.pipe(headerfooter.footer('src/headerfooter/footer.html'))
.pipe(gulp.dest("templates/purchase"))
})
更详细的可以去我的github上看一下
2、用后台模板来拼接，例如php，django等
3、可以用一些前端模板来做，例如我用的就是handlebars，你先用handlebars写好公共部分，然后再在js里用Handlebars.compile插入进来
如果你不想在页面加载完后再用js插入的话，建议使用前两者
这种情况一般都需要上构建工具，我是用gulp+jade实现的
能想到的只有两种解决方案：
后台拼接页面，可以用PHP，jsp或是nodejs模板引擎。
使用Ajax做单页面应用(不过这个似乎不符合你的要求)
你可以用shtml include的，不过一般都是在程序语言组装好的，而且每个语言都有各自的叫法，不过都是一个意思，
比如aspx就是用户控件啊
还有一种就是用ajax加载，不过这个不合常理，只不过能实现而已。
你可以考虑把头部导航栏的html 以字符串的形式保存到一个全局变量里，然后在需要的地方通过js动态写入进去。
用react框架轻松实现。
可以试下用组件来实现。
比如PHP里，把a.html中任意一段代码放到b.html文件中，然后在a.html那个地方这样调用
<?php include("b.html"); ?>
使用pugjs可以
比如把头部菜单栏的HTML当作字符串放在一个单独的js文件里，
样式独立一个文件，js动画(如果有的话一个独立的文件) 用的时候去拿来把HTML插入到页面，然后该用样式用样式，该用js用js就好了。
额，上面有人说过了
不需要后端语言，让运维配置SSI就可以了,这里是文档。
配置后使用很简单
<!--# include file="footer.html" -->
可以用frameset,可惜html5标准取消了，不过依然可以用
VUE做这个很简单,只需切换模块就能实现
楼主应该是想复用吧
1.可以用模板引擎,比如arttemplate,上手容易,功能简单,但是css样式,还有js你要再引用一次,关键他可以定义模板变量,可以改变你原来的一些内容
2.vue和react 都有组件功能,其实用过这两个框架后,你这个问题就迎刃而解了
3.node.js搭配nunjucks也不错,node应该属于后端思想编写页面,处理你这个问题很简单
扫一扫
2936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
