JS实现导航点击高亮显示

 本文为大家讲的是如何使用js实现点击选中当前导航菜单后按钮背景高亮显示，能达到的效果就是当我们点击网页导航菜单的某一个栏目时，该导航菜单按钮的背景颜色高亮显示或者变换背景图片，以此来丰富网页导航菜单的显示效果，让整个网页看起来更加炫酷生动。

通过js实现此效果的原理是使用js中的location.href来获得当前页面的URL链接地址，然后通过indexOf()方法与导航菜单URL链接地址进行匹配，如果匹配成功，就给该导航菜单按钮背景增加一个名为curument的css样式，此样式的背景可以设置成一个HTML颜色代码也可以设置成一个图片格式背景，这样就实现了js点击当前菜单高亮显示的功能。
    效果截图：
    
    具体实现代码如下：

<script type="text/javascript" src="http://www.haodoxi.com/dede58/js/jquery.min.js"></script>    <style>      .nav { margin:0; padding:0; list-style-type:none;}      .nav li { float:left; background:#FFD1A4; margin-right:1px; color:#fff; }      .nav li a { display:block; width:120px; height:45px; line-height:45px; text-align:center; color:#fff; font-size:16px; text-decoration:none;}      .curument{ background:#D96C00; font-weight:bold;}    </style>    <ul class="nav" id="nav">      <li><a href="index.html">首页</a></li>      <li><a href="1.html">栏目一</a></li>      <li><a href="2.html">栏目二</a></li>      <li><a href="3.html">栏目三</a></li>      <li><a href="4.html">栏目四</a></li>    </ul>    <script type="text/javascript">      var urlstr = location.href;      var urlstatus=false;      $("#nav a").each(function () {          if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {          $(this).addClass('curument'); urlstatus = true;        } else {          $(this).removeClass('curument');        }      });      if (!urlstatus) {$("#nav a").eq(0).addClass('curument'); }    </script>

    4.打开你的html页面，把导航书写方式修改成上面导航代码的形式。

    最后提一点，如果首页用的是/链接地址的话是识别不了的，解决办法就是/后面空一格即可。即<a href="/ ">首页</a>