不同页面所对应的导航设置样式

总结一下如何在点击导航跳转到对应的页面，让页面对应的导航栏目有自己的样式，让浏览者可以快速的知道自己当前所处的页面是哪个。

首先在每个链接的地址后都加上#1，#2，#3···这样的标识，例如

<div class=head>
    <ul class=menu>
          <li><a href="http://www.yuzdesign.cc#1">导航1</a></li>
          <li><a href="http://www.yuzdesign.cc#2">导航2</a></li>
          <li><a href="http://www.yuzdesign.cc#3">导航3</a></li>
          <li><a href="http://www.yuzdesign.cc#4">导航4</a></li>
    </ul>
</div>

然后调用如下的JS方法：

$(function(){
    var url=document.location.href;
    var menuId=url.split('#')[1];
    if(menuId==null){
         menuId=1;
    }
    var num=0;
    $(".menu").find("li").each(function(){
         num++;
         if(num==menuId){
              $(this).addClass("active");//.active给所在页面的导航栏目添加样式
          }
          else{
              $(this).removeClass("active");
          }
    })
})

这样就可以修改所在页面对应导航的样式

.active{
    color:#000;
    border:1px solid #000;
}