mvc下导航高亮的几种解决方案

1.从网上摘要：

前言

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

 

纯 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('mainNav', 'active');
});

function SetNavClass(ulId, className) {
    var controller = $('#controller').val();
    var action = $('#action').val();
    eval('controller_' + controller + ' = true');
    eval('action_' + action + ' = true');
    list = $('#' + ulId + ' *');

    for (var k = 0; k < list.length; k++) {
        item = list[k];
        str = GetClassName(item).toLowerCase();
        try {
            if (eval(str)) $(item).addClass(className);
        } catch (e) { }
    }
}
function GetClassName(item) {
    var classStr = $(item).attr('class');
    if (classStr == null) return "";
    classes = classStr.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 名字不一样，那么只要在调用这个函数的时候传入你自己的就行了

以上两行代码表示：

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

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

-----------------------------------------------------------

2.我在工作中用到的方法。 利用cookie。引用jquery.cookie.js。因为我也是mvc的项目，而且前后台引用的layout不一样，但是都是一样的导航。在写的这段代码上没发现什么不对的地方，但是从前台跳转到后台，导航的cookie加的样式背景没有去掉。我就想了一个办法，在后台的layout单独引用了一个导航partial这样就可以了。

代码：

 //导航当前页面栏目高亮
            var maId = $.cookie("HomemenuId");
            $("ul.nav li>a").live("click", function () {
                $.cookie("HomemenuId", null, { path: '/' });
                $.cookie('HomemenuId', $(this).attr("id"), { path: '/' });
                $(this).css("background", "url(/Images/gdsj/nav_cur.png) no-repeat");
                $(this).css("color", "#900");
            });
            if (maId != null) {
                $("#" + maId).css("background", "url(/Images/gdsj/nav_cur.png) no-repeat");
                $("#" + maId).css("color", "#900");
                $.cookie("HomemenuId", null, { path: '/' });
            }
            if (maId == null) {
                $("ul.nav li>a").css("background", "none");
                $("ul.nav li>a").css("color", "#fff");
            }