简介

假设有多个html页面，每一个都有一个公共的导航栏，那么可以使用jQuery把导航栏这部分抽离出来，使得多个页面复用这部分，而不是每个html页面都维护相同的这段前端代码。

一、把公共导航栏这部分单独取出

<!--假设这是公共导航栏部分的html代码，单独保存到header.html--> 
<ul>
    <li>导航栏标签1</li>
    <li>导航栏标签2</li>
</ul>

二、在需要复用的html页面里导入

...
<!--导航栏-->
<div class="header-page"></div>
...
<script>
	//加载header.html
    $('.header-page').load('header.html');
</script>

或者把这段脚本单独放到一个js里，其他html引用这个js

// 假设这段脚本保存到header.js
$(document).ready(function () {
    //加载header.html
    $('.header-page').load('header.html');
});

那么其他html页面可以这样导入

<!--这部分可以放到head里和其他js脚本一起--> 
<script src="js/header.js"></script>