Javascript实现页面左边的菜单选中项高亮显示
在项目开发过程中,遇到一个问题
在一个模板页面中,Layout.cshtml,页面左边放了一个菜单项menu,每一项都是一个链接到一个新的页面。但所有页面都是用这个模板Layout.cshtml。需要当你点击到menu上某一项时,该项应用css class "selected"高亮显示。
Layout.cshtml代码如下:
<div class="sidebar-wrap">
<ul class="sidebar-ul" id="ProductNav"> <li>
<a class="selected" href="/product1">product1</a>
</li>
<li>
<a href="/product2">product2</a>
</li>
<li>
<a href="/product3">product3</a>
</li>
<li>
<a href="/product4">product4</a>
</li>
<li>
<a href="/product5">product5</a>
</li>
<li>
<a href="/product6">product6</a>
</li> </ul>
</div>
刚开始,我写了一个JavaScript脚本,如下:
<div class="sidebar-wrap">
<ul class="sidebar-ul" id="ProductNav"> <li>
<a class="selected" href="/product1">product1</a>
</li>
<li>
<a href="/product2">product2</a>
</li>
<li>
<a href="/product3">product3</a>
</li>
<li>
<a href="/product4">product4</a>
</li>
<li>
<a href="/product5">product5</a>
</li>
<li>
<a href="/product6">product6</a>
</li> </ul>
</div> <script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){ $('#ProductNav li a').click(function(){ $('#ProductNav li a.selected').removeClass('selected');
$(this).addClass('selected');
});
});
</script>
发现并不起作用,点击时,又回到原来的那个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"
具体如下
<div class="sidebar-wrap">
<ul class="sidebar-ul" id="ProductNav"> <li>
<a class="product1" href="/product1">product1</a>
</li>
<li>
<a class="product2" href="/product2">product2</a>
</li>
<li>
<a class="product3" href="/product3">product3</a>
</li>
<li>
<a class="product4" href="/product4">product4</a>
</li>
<li>
<a class="product5" href="/product5">product5</a>
</li>
<li>
<a class="product6" href="/product6">product6</a>
</li> </ul>
</div>
新的JavaScript如下
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var path = window.location.pathname;
path = path.replace('/', '');
$("." + path).addClass('selected'); }); </script>
如此,就大功告成了.
Javascript实现页面左边的菜单选中项高亮显示的更多相关文章
- JavaScript网站设计实践(二)实现导航栏当前所选页面的菜单项高亮显示
一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...
- MVC中导航菜单,选中项的高亮问题。
这个菜单是放在母板页的.比如当前选中的是异常业务监控.如果页面刷新了.就会变成第一张图..选择其他的选项也会,因为页面会刷新嘛.. 怎么处理这个问题了? 答案是记录当前页面的url. 有两种解决思 ...
- MVC中导航菜单,选中项的高亮问题。。
先上图: 这个菜单是放在母板页的.比如当前选中的是异常业务监控.如果页面刷新了.就会变成第一张图..选择其他的选项也会,因为页面会刷新嘛.. 怎么处理这个问题了? 答案是记录当 ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- 用JavaScript获取页面上被选中的文字的技巧
这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...
- wpf datagrid设置右键菜单打开时选中项的背景色
原文:wpf datagrid设置右键菜单打开时选中项的背景色 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/huangli321456/artic ...
- 刷新各ifream当前页,下拉项改变触发事件js,给选中项加背景色js
<script type="text/javascript" language="javascript"> //刷新框架各页面 function r ...
- jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
- ASP.NET Core Blazor 用Inspinia静态页模板搭建简易后台(实现菜单选中)
Blazor 是一个用于使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应用逻辑 ...
随机推荐
- EasyNVR H5直播流媒体解决方案前端构建之:如何播放自动适配RTMP/HLS直播播放
之前在进行EasyNVR多屏开发的时候,由于多屏功能不需要在手机端展示出来(pc多播放为RTMP,手机端播放为HLS),因此只注意到了引用videojs来进行rtmp的播放.由于不同项目需求不同,对h ...
- new 和 make 均是用于分配内存
the-way-to-go_ZH_CN/06.5.md at master · Unknwon/the-way-to-go_ZH_CN https://github.com/Unknwon/the-w ...
- 微信小程序设计指南
微信小程序设计指南 · 小程序 https://developers.weixin.qq.com/miniprogram/design/index.html
- css集合--表示有未读消息小红点的解决
只需要一个<i>标签,放在需要的文本后面即可 ex:<span>待解决问题<i></i><span> i{ display:block; b ...
- Java多线程系列 基础篇10 wait/notify/sleep/yield/join
1.Object类中的wait()/notify()/notifyAll() wait(): 让当前线程处于Waiting状态并释放掉持有的对象锁,直到其他线程调用此对象的线程notify()/not ...
- SVG圆盘时钟动画
在线演示 本地下载
- 通过崩溃trace来查找问题原因
从友盟中, 我们可能会得到如下信息: Application received signal SIGSEGV (null) ( 0 CoreFoundation 0x359348a7 __except ...
- jquery 用addClass之后 class有对应的事件,为什么要重新绑定一下事件呢
假设有元素A,B,C,其中A和B都有class属性cls,如果在页面加载完成时,给具有class属性为cls的元素绑定某一事件,例如click,执行事件时调用alert.也就是说,页面加载完成后A和B ...
- matlab之mean()函数
mean(A,1):沿着第一维(列)求平均值: mean(A,2):沿着第二维(行)求平均值: 举例: Z=[1 2 3;4 5 6]; >> mean(Z,1) ans = 2.5000 ...
- gVIM+zencoding快速开发HTML/CSS/JS(适用WEB前端)
一.真正解决了UTF-8中文乱码的各种问题(菜单乱码,内容乱码,提示信息乱码),不用担心WIN用默认编码写的东西在Linux乱码,或在Linux(zh_CN.UTF-8时)写的东西在WIN下乱码.在A ...