任何一个网站,都是离不开导航或菜单,为了让用户清楚的知道自己身处何方,“面包屑”路径也是经常被的应用的。但是,当前所属菜单的选中样式也是同样是经常被采用的。
像这种菜单,基本每个页面都会出现的,我们肯定会做一个控件来到处引用或者放到母版页里,这样就会出现选中的问题。呵呵,当然实现的方法也是多种多样,现在就说说自己的两种比较简单的解决方法,都是通过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,只需要给菜单的这个控件做操作,就可以实现所有的菜单选中效果,比第一个思路简单多了,特别适用于后期维护。你的页面很多了,才去实现选中效果,这个方法再适合不过了。但是,如果一个选中菜单下有太多的页面,那么自定义属性就会有很长的值,看起来真是有点难看,但是实现功能绝对没问题。哈哈。。。
总结:如果菜单项比较少,推荐第一种,选中的控制可以分别放到公共的区域;如果是网站后来要增加这种效果,或者菜单项比较多,每个菜单项下页面又不是太多,第二种简直就是完美。