简单的 菜单当前选中 解决思路

        任何一个网站，都是离不开导航或菜单，为了让用户清楚的知道自己身处何方，“面包屑”路径也是经常被的应用的。但是，当前所属菜单的选中样式也是同样是经常被采用的。

       例如我们经常用到的google音乐的这种样式：。

       像这种菜单，基本每个页面都会出现的，我们肯定会做一个控件来到处引用或者放到母版页里，这样就会出现选中的问题。呵呵，当然实现的方法也是多种多样，现在就说说自己的两种比较简单的解决方法，都是通过js实现。

        1，让页面本身去实现选中

         这种方法要让每个菜单项可以被页面的js调用,基本的方法就是：为菜单的每一项加一个id，写一个js的方法，去获取选中状态的菜单项，动态把样式添加上。很简单，但是每个页面都要去调用这个js，并且传入相应的参数，当然你也可以在某个菜单项下所有页面都会引用的控件中去实现，但是如果菜单比较多的话，还会存在维护的问题。

       2，让菜单自己去实现要选中哪个项

          这个方法，比上面那个更简单，更方便。

         html代码：

     <ul id="ul_leftmenu">
            <li colhref="page1.aspx,page1_update.aspx"><a href="page1.aspx">菜单1</a></li>
          <li colhref="page2.aspx,page2_update.aspx"><a href="page2.aspx">菜单2</a></li>
         <li colhref="page3.aspx,page3_update.aspx,page3_show2.aspx"><a href="page3.aspx">菜单3</a></li>
     </ul>

          这是页面的代码，其中colhref是自己定义的属性，你可以任意命名，基本的dom和jquery都可以很简单的获取这个属性的值，当然的它的值意思：打开这个值包含的页面时，会选中这个项。也就是是说，你要自己把这个菜单项下的页面的路径添加这个自定义的属性中。

           有了这个属性，实现起来就是相当简单了，

          js代码：

function selectCurrentMenu(ulMenuId) {
    var currentPage = location.pathname;//  获取当前页面的路径
    var currentPageName = currentPage.substring(currentPage.lastIndexOf("/") + 1);//获取当前文件名
    var liMenus = $("#" + ulMenuId).children();//获取所有的菜单项
    //  遍历，匹配，选中
    if (liMenus != null && liMenus.length > 0) {
        for (var i = 0; i < liMenus.length; i++) {
            if ($(liMenus[i]).attr("colhref").indexOf(currentPageName) >= 0) {
                $(liMenus[i]).attr("class", "li_current");
                break;
            }
        }
    }
}

        然后在页面load时调用这个js方法，传入菜单ID就行了。      

        OK，只需要给菜单的这个控件做操作，就可以实现所有的菜单选中效果，比第一个思路简单多了，特别适用于后期维护。你的页面很多了，才去实现选中效果，这个方法再适合不过了。但是，如果一个选中菜单下有太多的页面，那么自定义属性就会有很长的值，看起来真是有点难看，但是实现功能绝对没问题。哈哈。。。

       总结：如果菜单项比较少，推荐第一种，选中的控制可以分别放到公共的区域；如果是网站后来要增加这种效果，或者菜单项比较多，每个菜单项下页面又不是太多，第二种简直就是完美。

转载于:https://www.cnblogs.com/forcertain/archive/2011/03/31/2000719.html