博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript实现页面左边的菜单选中项高亮显示
阅读量:5278 次
发布时间:2019-06-14

本文共 2237 字,大约阅读时间需要 7 分钟。

在项目开发过程中,遇到一个问题

在一个模板页面中,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如下

如此,就大功告成了.

 

转载于:https://www.cnblogs.com/wphl-27/p/6386244.html

你可能感兴趣的文章
js创建对象
查看>>
有状态EJBBean和无状态的EJBBean
查看>>
使用json格式输出
查看>>
border-image属性在chrome中的不同效果
查看>>
php做的一个简易爬虫
查看>>
x的x次幂的值为10,求x的近似值
查看>>
hdu-5009-Paint Pearls-dp
查看>>
Codeforces Round #246 (Div. 2)
查看>>
内存泄漏调查
查看>>
jquery获取html元素的绝对位置和相对位置的方法
查看>>
谈谈spring
查看>>
ios中webservice报文的拼接
查看>>
Power BI 报告的评论服务支持移动设备
查看>>
MySQL 5.7社区版安装实践
查看>>
vue-auto-focus: 控制自动聚焦行为的 vue 指令
查看>>
docker入门学习(四) 安装nginx及配置
查看>>
有人物联网数传终端设备在智慧电力和公共事业中的应用
查看>>
《剑指offer》第三_二题(不修改数组找出重复的数字)
查看>>
windows 核心编程第一章:关于错误
查看>>
好设计,迁移不费劲
查看>>