<ul  id="nav">
<li ><a href="http://www.mamicode.com/index.html">首页</a></li>

<li ><a href="http://www.mamicode.com/1.html">第一</a></li>

<li ><a href="http://www.mamicode.com/2.html">第二</a></li>

<li ><a href="http://www.mamicode.com/3.html">第三</a></li>
</ul>

<style>

　　.active{color:#fff;background:#000;}

</style>

jquery

$("#nav a").each(function(){
　　if($(this).attr(‘href‘)==String(window.location)){
　　　　$(this).parent().addClass("active");
　　}
});

页面切换导航样式也随之改变