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

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

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

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