博客
关于我
强烈建议你试试无所不能的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

你可能感兴趣的文章
解决弹出层被FLASH覆盖(Flash置底)
查看>>
java反射工具类
查看>>
grep、awk、sed的巩固练习
查看>>
fork 创建进程的过程分析
查看>>
js求时间差,两个日期月份差
查看>>
解决chkconfig设置开机启动时出现missing LSB的错误
查看>>
《HP大中华区总裁孙振耀退休感言》
查看>>
prim算法java版
查看>>
Unity 着色器
查看>>
夺命雷公狗jquery---29滑动效果
查看>>
WPScan扫描Wordpress漏洞
查看>>
Xcode 断点的使用
查看>>
Logger Rate Limiter 十秒限时计数器
查看>>
姓名排序
查看>>
Til the Cows Come Home
查看>>
27. Retrofit2 -- How to Use Dynamic Urls for Requests
查看>>
一个简易的选择小时(时分秒)的插件
查看>>
Burpsuite之Burp Collaborator模块介绍
查看>>
通过宏定义将__declspec(dllexport)与__declspec(dllimport)的转化,实现库代码和使用代码使用同一份头文件...
查看>>
CentOS7.5安装坚果云
查看>>