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

你可能感兴趣的文章
java易错题----静态方法的调用
查看>>
php建立MySQL数据表
查看>>
最简单的线程同步的例子
查看>>
旅途上看的电影和观后感
查看>>
Ztree异步树加载
查看>>
关于IE和火狐,谷歌,Safari对Html标签Object和Embed的支持问题
查看>>
poj3320 Jessica's Reading Problem(尺取思路+STL)
查看>>
分布式计算开源框架Hadoop介绍
查看>>
安卓平台接口剖析
查看>>
坏的事情不都会带来坏的结果
查看>>
RPC的基础:调研EOS插件http_plugin
查看>>
第二次团队冲刺第二天
查看>>
bzoj 2257 (JSOI 2009) 瓶子与燃料
查看>>
11)Java abstract class 和 interface
查看>>
使用xrdp或Xmanager 远程连接 CentOS6
查看>>
Linux误删恢复
查看>>
Unity调用Windows窗口句柄,选择文件和目录
查看>>
HashMap循环遍历方式
查看>>
React Native 入门 调试项目
查看>>
C# 通过 Quartz .NET 实现 schedule job 的处理
查看>>