jQuery实现多级导航栏高亮显示

应用在何处？

当点击导航栏时，高亮显示用户处于哪一分类下
例如：用户在首页时

用户跳转到其他分类导航下

并且当点击某个分类的子类下，仍然高亮显示所在分类

实现代码

导航栏代码（方便观看只贴了两个分类菜单，）
class=“nav_bg” 是默认显示
class="nav_bg cur"是高亮显示
默认都为nav_bg

 <table border="0" cellspacing="0" cellpadding="0" class="dh" style=" text-align:center; ">
            <tbody>
            <tr>
              <td class="nav_bg"  rel="index">
                <a href="www.xxx.com">首页 <span>Home</span></a>
              </td>
              ........
              <td class="nav_bg " rel="Donation" >
                <a href="www.xxx.com/src/Donation/donationlist.html">校友捐赠 <span>Donation</span>	     </a>
              </td>
             .........
            </tr>
            </tbody>
          </table>

jQuery代码
讲一下代码的思路，lochref.indexOf(me.parent().attr('rel'))!= -1 这个是为了判断除了首页外所有的页面，包括每个导航菜单的子菜单。因为在导航栏的代码中每一个中都设置了rel属性，如果我点击了“校友捐赠”这个菜单，就会判断我的“校友捐赠”这个页面的url是否包含了我设置的rel=“donation”这个值，所以只要“校友捐赠”这个菜单和子菜单中的url中包含donation这个单词就行。
类似这样：www.xxx.com/src/Donation/donationlist.html
www.xxx.com/src/Donation/donationway.html
访问这两个url时都能使“校友捐赠”这个菜单高亮

而如果是首页的话，首页的url一般都是www.xxx.com，无法设置专门的rel来判断，因为每个页面都包含www.xxx.com，所以使用最简单的判断 lochref == mehref 当前访问的url如果与导航栏代码中设置的链接href一样时就高亮

<script>
  $(function () {

    //trim() 方法用于删除字符串的头尾空格。
    var lochref = $.trim(window.location.href);// 获得当前页面的URL
    $(".dh tbody tr td a").each(function (i) { /获取导航栏中每个a标签
      var me = $(this);
      var mehref = $.trim(me.get(0).href);//获得每个<a>的url
      /*判断当前url是否包含每个导航特定的rel  lochref == mehref是为了专门判断首页  */
      if (lochref.indexOf(me.parent().attr('rel')) != -1 || lochref == mehref) {
        me.parent().addClass("cur");
      } else {
        me.parent().removeClass("cur");
      }
    });
  });
</script>

css代码

<style>
.cur {
    background-color: #e0a83d;
  }
 .cur a {
    color: #000000;
    font-weight: bold;
 }
  .nav_bg:hover {
    background: #97600d repeat-x;
 }
</style>

总结
后端写前端——这都是啥？