无论是Metronic5.1、gentelella、admilte等等bootstrap框架中左侧菜单，如果是静态页面，那么菜单状态都是设置好的。以下以Metronic5.1为例：
<li class="m-menu__item m-menu__item--submenu m-menu__item--open m-menu__item--expanded" aria-haspopup="true" data-menu-submenu-toggle="hover"> <a href="#" class="m-menu__link m-menu__toggle"> <i class="m-menu__link-icon flaticon-placeholder-1"></i> <span class="m-menu__link-text"> Maps </span> <i class="m-menu__ver-arrow la la-angle-right"></i> </a> <div class="m-menu__submenu "> <span class="m-menu__arrow"></span> <ul class="m-menu__subnav"> <li class="m-menu__item m-menu__item--parent" aria-haspopup="true" > <span class="m-menu__link"> <span class="m-menu__link-text"> Maps </span> </span> </li> <li class="m-menu__item m-menu__item--active" aria-haspopup="true" > <a href="../../components/maps/google-maps.html" class="m-menu__link "> <i class="m-menu__link-bullet m-menu__link-bullet--dot"> <span></span> </i> <span class="m-menu__link-text"> Google Maps </span> </a> </li> <li class="m-menu__item " aria-haspopup="true" > <a href="../../components/maps/jqvmap.html" class="m-menu__link "> <i class="m-menu__link-bullet m-menu__link-bullet--dot"> <span></span> </i> <span class="m-menu__link-text"> JQVMap </span> </a> </li> </ul> </div> </li>
m-menu__item m-menu__item--submenu m-menu__item--open m-menu__item--expanded是菜单分组，
m-menu__item m-menu__item--active呢是当前选中的菜单项。
那么如何在切换页面的时候让下一个页面的导航菜单分组实现m-menu__item--open m-menu__item--expanded并且当前选中的菜单项实现m-menu__item--active就是要解决的问题：
var CURRENT_URL = window.location.pathname.split(‘#‘)[0].split(‘?‘)[0]; $("#m_ver_menu").find(‘a[href="‘ + CURRENT_URL + ‘"]‘).parent(‘li‘).parents(‘li‘).eq(0).addClass(‘m-menu__item--open‘).addClass(‘m-menu__item--expanded‘); $("#m_ver_menu").find(‘a[href="‘ + CURRENT_URL + ‘"]‘).parent(‘li‘).addClass(‘m-menu__item--active‘);
使用window.location.pathname而不使用window.location.href，是因为window.location.href的返回值带有"http://..."等内容。
仅此记录。
