关于非iframe版本菜单高亮

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

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

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

这里稍微将一下js处理。假设当前的菜单项如下（默认首页是选中的）：

<nav class="sidebar-main">
  <ul class="nav-drawer">
    <li class="nav-item active"> <a href="/index.html"><i class="mdi mdi-home"></i> <span>后台首页</span></a> </li>
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)"><i class="mdi mdi-palette"></i> <span>UI 元素</span></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)"><i class="mdi mdi-menu"></i> <span>多级菜单</span></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处理，这里就不对菜单栏的滚动条做调整了。

$(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');
        }
    });
});