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

最近做了一个纯静态页面的网页，有一些页面的公共部分，不想重复在每一个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 页面中预留公共页面的引入位置：

......

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

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

我是选中标签所在的

$(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

if(links[i].href.indexOf(url)!=-1){

index = i;

break;

}

}

}

$(".nav-left li").eq(index).addClass("active");//给对应的

增加选中样式

})

})