最近做的一个网站项目，由于种种原因技术选的是jquery。但网站的顶部导航栏 和 底部每个页面都是一模一样的，重复的写固然可以，但这样做是不推荐的，代码冗余不说，主要是不好维护，中途要改公用部分的东西你就需要每个页面去改，麻烦而且有可能会有遗漏。那如何抽离出公用的部分呢？(有点类似Vue，React等框架的组件化)我选的是运用jquery的load方法，还有很多其他方法，如iframe ，include等等网上都能搜到。实现代码如下:
<!--例：复用网站顶部导航内容 1.header.html用来存放复用内容，不需要完整的html页面，<html> <head> <body> 等等标签都不需要，只需要相关内容。--> <header> <div>1</div> <div>2</div> <div>2</div> </header> <script> <!--对头部的js逻辑--> </script> <!--2.引用的页面,在需要的地方写一个空标签用来放引入的内容--> ... <div class="header-page"></div> <script> //注 load里面是header.html的文件路径，同个目录直接文件名称就可以了。 $('.header-page').load('header.html'); //注 load方法是异步的，如果你想对引入的文件dom进行操作 必须在其回调函数中操作 否则会获取不到dom节点 </script>网站头部导航栏每项很多时候是指向一个页面，一般会给选中的导航栏加样式，来标明现在是那一项的内容如：
当我们头部是公用的时候，我们在页面当中如何实现给相应导航栏加样式呢？1.可以通过获取相应项的dom 给其加样式 2.通过css子元素选择器选择相应的导航栏加样式
header div:nth-child(1){ ... }
