在项目开发过程中,遇到一个问题
在一个模板页面中,Layout.cshtml,页面左边放了一个菜单项menu,每一项都是一个链接到一个新的页面。但所有页面都是用这个模板Layout.cshtml。需要当你点击到menu上某一项时,该项应用css class "selected"高亮显示。
Layout.cshtml代码如下:
刚开始,我写了一个JavaScript脚本,如下:
发现并不起作用,点击时,又回到原来的那个product1高亮显示。
原因很简单,因为每一次点击,比如点击product2,它就会进入一个新的页面product2,会重新加载一次Layout.cshtml,而这个javascript是在product1页面执行的,你点击product2,重新加载Layout.cshtml, 还是上面的代码,product1为selected
那么如何实现呢。弄了好久,终于发现一个简便的办法。当从product1页面,点击product2时,用window.location.pathname获取"/product2",从中取出product2. 然后在menu中的每个链接<a>中加上class,class名就是这个名(比如product2).
这样去匹配,匹配上的,就说明是当前页面,就加上css "selected"
具体如下
新的JavaScript如下
如此,就大功告成了.