html 引入公共的头部和底部

最新推荐文章于 2025-07-08 19:34:18 发布

原创最新推荐文章于 2025-07-08 19:34:18 发布 · 4.5w 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#html #头部 #公共部分

html 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用jQuery load函数来简化网页布局的方法，通过将重复的头部和底部组件提取出来，可以有效减少代码重复并提高维护效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在做项目的时候经常会遇到一样的头部和底部，如果每个页面都复制一遍，不仅工作量大而且万一需要修改一下文章就更麻烦了，这时候就需要我们把公共部分提取出来，等需要的时候再引入页面。在网上找了好久，也尝试了几次，觉得对前端来说最好的方法就是使用jQuery的load函数，

/*导入头部和尾部*/
$(document).ready(function(){
   $(".footer").load("page/footer.html");
});

但是注意，此时的footer.html不需要是完整的HTML（当时本人自己可是遇到了这个大坑，都是泪/(ㄒoㄒ)/~~），这包含标签内容即可

<!--footer.html页面-->
<footer>
   <ul class="g-flex">
      <li class="g-flex-auto"><a href="#" class="i-b">首页</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">分类</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">订单</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">我的</a></li>
   </ul>
</footer>