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

在一个模板页面中,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实现页面左边的菜单选中项高亮显示的更多相关文章

  1. JavaScript网站设计实践(二)实现导航栏当前所选页面的菜单项高亮显示

    一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...

  2. MVC中导航菜单,选中项的高亮问题。

      这个菜单是放在母板页的.比如当前选中的是异常业务监控.如果页面刷新了.就会变成第一张图..选择其他的选项也会,因为页面会刷新嘛.. 怎么处理这个问题了? 答案是记录当前页面的url. 有两种解决思 ...

  3. MVC中导航菜单,选中项的高亮问题。。

    先上图:             这个菜单是放在母板页的.比如当前选中的是异常业务监控.如果页面刷新了.就会变成第一张图..选择其他的选项也会,因为页面会刷新嘛.. 怎么处理这个问题了? 答案是记录当 ...

  4. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  5. 用JavaScript获取页面上被选中的文字的技巧

    这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...

  6. wpf datagrid设置右键菜单打开时选中项的背景色

    原文:wpf datagrid设置右键菜单打开时选中项的背景色 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/huangli321456/artic ...

  7. 刷新各ifream当前页,下拉项改变触发事件js,给选中项加背景色js

    <script type="text/javascript" language="javascript"> //刷新框架各页面 function r ...

  8. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  9. ASP.NET Core Blazor 用Inspinia静态页模板搭建简易后台(实现菜单选中)

    Blazor 是一个用于使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应用逻辑 ...

随机推荐

  1. php计算数组的维数

    function array_dim($arr){ if(!is_array($arr)) return 0; else{ $max1 = 0; foreach($arr as $item1){ $t ...

  2. python基础教程_学习笔记11:魔法方法、属性和迭代器

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/signjing/article/details/31417309 魔法方法.属性和迭代器 在pyth ...

  3. ubuntu 14.04 用 shell 方便安装nginx

    nginx.sh apt-get install -y build-essential gcc g++ make m4 libpcre3 libpcre3-dev libcurl4-gnutls-de ...

  4. <算法笔记>关于快速排序的算法优化排序(顺便给百度百科纠个错)

    快速排序是排序算法之中的基本中的基本,虽然越来越多的接口函数将快速排序“完美的封装了起来”,比如C++中的qsort或者<algorithm>中的sort(与stable_sort相对应) ...

  5. Centos虚拟机克隆后的ip配置

    1. rm -rf /etc/udev/rules.d/-persistent-net.rules 2. 重启,然后: vi /etc/udev/rules.d/70-persistent-net.r ...

  6. nginx日志分析命令记录

    这是要注意的 可能因为 线上 nginx日志输出格式的不一样,一下命令未能展示正确的结果 流量速率分析的第三个命令 慢查询分析的第一二个命令 参考文档,nginx日志输出格式为 $remote_add ...

  7. 在js实现矩阵转置

    var arr=[[2,4,6,8],[8,9,0,-1],[9,6,2,1]]; //定义一个新的数组 var arr2=[]; for(var i=0;i<arr[0].length;i++ ...

  8. Eclipse中导入github上的项目

    Eclipse中导入github上的项目 转载至: http://blog.csdn.net/hil2000/article/details/8566456 1.首先在github.com上申请一个账 ...

  9. AOP和IOC的作用(转)

    AOP和IOC的作用 转载▼     IOC:控制反转,是一种设计模式.一层含义是控制权的转移:由传统的在程序中控制依赖转移到由容器来控制:第二层是依赖注入:将相互依赖的对象分离,在spring配置文 ...

  10. linux命令学习笔记(45):free 命令

    free命令可以显示Linux系统中空闲的.已用的物理内存及swap内存,及被内核使用的buffer.在Linux系统监控的 工具中,free命令是最经常使用的命令之一. .命令格式: free [参 ...