前言

导航高亮一直是一个让大家头疼的问题。

纯 Javascript 的话可以判断当前页面的地址和链接地址是否有关系。

这样的弊端就是自由度太低,MVC 下会出一定的问题 (MVC 下有默认的 Controller 和 Action)

另一种方案是前端后端结合,为每一张页面设置一个属性,然后在页面中判断。满足条件便高亮。

这样的弊端就是,需要为你所有的页面设置属性,非常麻烦!

那么有没有什么完美的解决方案?一劳永逸的?

神奇的 eval 函数

Javascript 有精粹也有糟粕,其中的 eval 是大多数动态语言都拥有的精髓。我们是否可以利用这个函数呢?

基本思路:

给每一个 li(对应一个链接)设置一个 class,例如 class=”controller_Home”,

代表着,只要这张页面是的 controller 是 Home,就让这个链接高亮。

而在页面中,是可以通过代码直接得到 controller 和 action 的名称的,没必要为每一张页面单独手动设置。

解决方案

 

<ul id="top-navigation">
<li class="controller_Home"><span><span>@Html.ActionLink("Ê×Ò³","Index","Home")</span></span></li>
<li class="controller_Article"><span><span>@Html.ActionLink("ÎÄÕ¹ÜÀí","Index","Article")</span></span></li>
<li class="controller_User"><span><span>@Html.ActionLink("Óû§¹ÜÀí","Index","User")</span></span></li>
</ul>
<input id="controller" type="hidden" value="@Html.ViewContext.RouteData.Values["controller"]"/>
<input id="action" type="hidden" value="@Html.ViewContext.RouteData.Values["action"]"/>

View 中的代码如上所示:

  1. 首先给所有的 li 加上一个 class
  2. 然后再利用两个 hidden ,把 controller 和 action 的名字放到前端页面中
$(function () {
SetNavClass('top-navigation', 'active');
}); function SetNavClass(ulId, className) {
controller = $('#controller').val();
action = $('#action').val();
eval('controller_' + controller + ' = true');
eval('action_' + action + ' = true');
list = $('#' + ulId + '>li'); for (var k = 0; k < list.length; k++) {
item = list[k];
str = GetClassName(item);
try {
if (eval(str)) $(item).addClass(className);
} catch (e) { }
}
}
function GetClassName(item) {
classes = $(item).attr('class').split(' ');
for (var k = 0; k < classes.length; k++) {
if (classes[k].indexOf('controller') > -1 || classes[k].indexOf('action') > -1) return classes[k];
}
}

以上是 Javascript 的代码:

  1. 读取 controller 和 action 的名字
  2. 利用 eval 函数给 controller_[controller名字] 和 action_[action名字] 这两个变量赋值
  3. 取出 class 中的表达式
  4. 利用 eval 函数执行表达式,判断最后的结果,如果满足条件就加上高亮的 class

上述代码不需要为每个页面编写,只需要在母版页中编写一次即可,再引用这段 Javascript 函数。

如果你的 ul ID 和 高亮 class 名字不一样,那么只要在调用这个函数的时候传入你自己的就行了。

高级应用

就这么简单?仅此而已?

如果真的是这样,那么完全可以直接利用 Javascript 判断页面地址来实现。

那么让我们来玩一些好玩的吧~

因为是 eval 函数,所以完全可以在这个 class 中编写复杂的表达式(其实就是 Javascript 表达式)

 

<li class="controller_Home||controller_About"><span><span>@Html.ActionLink("首页", "Index", "Home")</span></span></li>
<li class="controller_Article&&action_Add"><span><span>@Html.ActionLink("文章管理", "Index", "Article")</span></span></li>

以上两行代码表示:

  1. controller 只要是 Home,或者 About,都会激活这个链接
  2. controller 必须是 Article,action 必须是 Add

也就是说,在这个 class 里可以输入复杂的 Javascript,这样就可以实现复杂的导航激活功能了!

转:MVC 下导航超链接本页面高亮的一种解决方案的更多相关文章

  1. MVC下 把数据库中的byte[]值保存成图片,并显示在view页面

    MVC下 把数据库中的byte[]值转成图片,并显示在view页面 controller中的action方法 //显示图片[AllowAnonymous]public ActionResult Sho ...

  2. 微信小程序自定义下导航页面切换效果的合理写法

    上图::: 导航模板内容页面的定义: <template name="naviBot">   <view class='navwrap t_cen font_26 ...

  3. Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮

    Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区.       ...

  4. MVC下压缩输入的HTML内容

    在MVC下如何压缩输出的HTML代码,替换HTML代码中的空白,换行符等字符? 1.首先要了解MVC是如何输出HTML代码到客户端的,先了解下Controller这个类,里面有很多方法,我们需要的主要 ...

  5. ASP.NET MVC下的四种验证编程方式

    ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效性,我们将针对参数的验证成为Model绑定 ...

  6. MVC下判断PC和移动端

    MVC下的PC端和移动端,其实没区别,写法都一样,只是有两点才改变了它们 第一点:就是单击这个页面任何地方的时候判断是移动端还是客户端: 第二点:新建手机端区域Areas(简单来说:Areas就相当于 ...

  7. phpcms 完美实现 导航栏当前栏目高亮

    我们在用phpcms做网站的时候,经常碰到导航栏高亮功能,或者侧栏高亮,这个会涉及到几个问题: .栏目列表页子栏目高亮判断,如果当前页面为子栏目,他的顶级栏目如果在导航栏也要高亮. .内容页高亮,这个 ...

  8. Response.End()在Webform和ASP.NET MVC下的表现差异

    前几天在博问中看到一个问题--Response.End()后,是否停止执行?MVC与WebForm不一致.看到LZ的描述后,虽然奇怪于为何用Response.End()而不用return方式去控制流程 ...

  9. ASP.NET MVC下的四种验证编程方式【转】

    ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效 性,我们将针对参数的验证成为Model绑 ...

随机推荐

  1. C# File

    http://msdn.microsoft.com/zh-cn/library/system.io.file(v=vs.110).aspx using System; using System.IO; ...

  2. linux源代码阅读笔记 linux文件系统(二)

    上一篇文章说到linux文件系统中分为超级块,inode块,block块.inode块给出文件的权限,修改时间,大小等信息. 但是实际上,文件的数据是存储在block块中的.而inode块中给出了存储 ...

  3. POJ1222 高斯消元法解抑或方程

    第一次学怎么用高斯消元法解抑或方程组,思想其实很简单,方法可以看下面的链接:http://blog.csdn.net/zhuichao001/article/details/5440843 有了这种思 ...

  4. ZOJ 3778 Talented Chef(找规律,模拟计算,11届ACM省赛,简单)

    题目链接 2014年浙江省赛C题,当时觉得难,现在想想这题真水.. 找规律: 若   最大的那个步骤数*m-总和>=0,那么答案就是 最大的那个步骤数 . 否则  就要另加上不够的数量,具体看代 ...

  5. 关于ios 8 7 下的模态窗口大小的控制 代碼+場景(mainstoryboard)( Resizing UIModalPresentationFormSheet )

    1 代碼 UIViewController* modalController = [[UIViewController alloc]init];modalController.modalTransit ...

  6. net中使用母版页

    .net中使用母版页的优点 母版页提供了开发人员已通过传统方式创建的功能,这些传统方式包括重复复制现有代码.文本和控件元素:使用框架集:对通用元素使用包含文件:使用 ASP.NET 用户控件等.母版页 ...

  7. 毕向东JAVA视频讲解(四五课)

    内存的划分: 1,寄存器. 2,本地方法区. 3,方法区. 4,栈内存. 存储的都是局部变量. 而且变量所属的作用域一旦结束,该变量就自动释放. 5,堆内存. 存储是数组和对象(其实数组就是对象) 凡 ...

  8. Debug过程中的mock (及display窗口的使用)

    转载:http://m.blog.csdn.net/blog/u012516903/18004965 在debug的时候,有3个地方可以进行mock测试 测试代码如下: 1.使用display窗口 W ...

  9. mysql外键级联更新删除

    MySQL支持外键的存储引擎只有InnoDB,在创建外键的时候,要求父表必须有对应的索引,子表在创建外键的时候也会自动创建对应的索引.在创建索引的时候,可以指定在删除.更新父表时,对子表进行的相应操作 ...

  10. CentOS7安装Hadoop2.7完整流程

    总体思路,准备主从服务器,配置主服务器可以无密码SSH登录从服务器,解压安装JDK,解压安装Hadoop,配置hdfs.mapreduce等主从关系. 1.环境,3台CentOS7,64位,Hadoo ...