关于非iframe版本菜单高亮

一般后台的左侧菜单，都是通用的，在这种情况下，切换到新的页面，菜单的高亮，1、可以采用后端程序处理。2、采用js处理。js匹配url地址的解决方式相对而言还有一些延迟。

如果你是php开发，可以参考我用光年模板的thinkphp项目。

项目地址：[https://gitee.com/yinqi/light-year-doc](https://gitee.com/yinqi/light-year-doc)

这里稍微将一下js处理。假设当前的菜单项如下（默认首页是选中的）：
```html
<nav class="sidebar-main">
 <ul class="nav-drawer">
 <li class="nav-item active"> <a href="/index.html"> 后台首页</a> </li>
 <li class="nav-item nav-item-has-subnav">
 <a href="javascript:void(0)"> UI 元素</a>
 <ul class="nav nav-subnav">
 <li> <a href="/test_abc.html">排版</a> </li>
 <li> <a href="/test_123.html">栅格</a> </li>
 </ul>
 </li>
 <li class="nav-item nav-item-has-subnav">
 <a href="javascript:void(0)"> 多级菜单</a>
 <ul class="nav nav-subnav">
 <li> <a href="/test_biaoqianchajian.html">标签插件</a> </li>
 <li class="nav-item nav-item-has-subnav"> 
 <a href="#!">一级菜单</a>
 <ul class="nav nav-subnav">
 <li> <a href="/test_changdu.html?a=1&b=2">长度判断</a> </li>
 <li class="nav-item nav-item-has-subnav"> 
 <a href="#!">二级菜单</a>
 <ul class="nav nav-subnav">
 <li> <a href="/test_riqi.html">日期选取器</a> </li>
 </ul>
 </li>
 </ul>
 </li>
 <li> <a href="#!">一级菜单</a> </li>
 </ul>
 </li>
 </ul>
</nav>
```

> 因为很多时候，我们的菜单栏链接就是以 `/` 开始，所以这里 `href` 也以 `/` 开始，`window.location.pathname` 获取值也是以 `/` 开头，如果不是，请自行将 `/` 过滤掉再做匹配

js处理，这里就不对菜单栏的滚动条做调整了。
```javascript
$(document).ready(function(e) {
    var pathname  = window.location.pathname;
    var search    = window.location.search;
      
    var $path = search ? pathname + search : pathname;
    $('.nav-drawer').find('a').each(function () {
        tempPath = $(this).attr('href');
        if ($path == tempPath) {
            $('.nav-drawer').find('.nav-item').removeClass('active').removeClass('open');
            $('.nav-drawer').find('.nav-subnav:visible').slideUp(500);
            $(this).parent('li').addClass('active');
            $(this).parents('.nav-subnav').slideDown(500);
            $(this).parents('.nav-item').addClass('open');
            $(this).parents('.nav-item').last().addClass('active');
        }
    });
});
```