本文為大家講的是如何使用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>