最近做的一个网站项目，由于种种原因技术选的是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){
...
}
418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
