如何点击导航栏高亮显示

我们在在web开发中会遇到这样一个问题：当你点击某一个导航时，就让他高亮显示，其他的默认。

可以用一下两种方法解决：

1，在每一个文件中都引入头部，然后为不同的链接添加样式

缺点：比较麻烦，如果要修改样式，每个文件都要修改

2，把头部提出来，用js判断url地址，然后给当前的url加上样式（用js控制的）

<!---以下是html部分，给div添加一个id-->
<div class="nav_nav" id="menu">
  <a href="/" class="active">首页</a>   
  <a href="/product/product.php" >电影</a>
  <a href="/shop/map.php">影院</a><b></b>
  <a href="/shop/shop.php">榜单</a>
  <a href="/shop/shop_search.php">热点</a>
</div>

<script type="text/javascript">
   //获取div下面所有的a标签（返回节点对象）
   var myNav = document.getElementById("menu").getElementsByTagName("a");

   //获取当前窗口的url
   var myURL = document.location.href;

   //循环div下面所有的链接，
   for(var i=1;i<myNav.length;i++){
   //获取每一个a标签的herf属性
  var links = myNav[i].getAttribute("href");
  var myURL = document.location.href;

  //查看div下的链接是否包含当前窗口，如果存在，则给其添加样式
  if(myURL.indexOf(links) != -1){
    myNav[i].className="active";
    myNav[0].className="";
   }
 }
</script>


*注意*active为样式名称 ，根据自己想要的样式自定义即可。