利用jQuery load 方法加载HTML公共页面,导航菜单自动选中

最近做了一个纯静态页面的网页，有一些页面的公共部分，不想重复在每一个html 中编写，想用

<!-- #include file="header.html" --> ,发现引用不了，不起作用。

后来知道，include是SSI（Server Side Include），在html中不支持include。

查了下资料，看到jQuery的load方法可以引用其他html 页面，用了下，果然很方便。记录一下

公共页面：header.html     ,   footer.html  , nav.html

主页面：index.html等

1) 在 index.html 中先引入 jquery.min.js

2) 在index.html 页面中预留公共页面的引入位置：

<div class="header"></div>

<div class="nav-left"></div>

......

<div class="footer"></div>

3) 写一个公共js,在每个html中引入该js

对于选中当前页面对应的菜单项处理方法，一定要放在公共页面加载完毕之后。

我是选中<a>标签所在的<li>

$(document).ready(function(){
	$(".header").load("header.html");
	$(".nav-left").load("nav.html",function(){
		var links = $(".nav-left li a"),
		index = 0, //默认第一个菜单项
		//取当前URL最后一个/后面的文件名，pop方法是删除最后一个元素并返回最后一个元素
		url = location.href.split("?")[0].split("/").pop();
		if(url){//如果有取到，则进行匹配，否则默认首页（即index所指向的那个）
			for(var i=0;i<links.length;i++){//遍历menu中的链接地址
				if(links[i].href.indexOf(url)!=-1){
					index = i;
					break;
				}
			}
		}
		$(".nav-left li").eq(index).addClass("active");//给对应的<li>增加选中样式
	})
})