MVC点击菜单一直保持高亮状态



MVC 用于菜单链接的部分都是放在_Layoutout.cshtml中的，自定义的网页都是嵌入到上述网页中（通过@RenderBody()嵌入自定义网页部分）。

当然也可以自定义菜单链接页，本人直接用_Layoutout.cshtml可以满足需求。

下面说说如何点击菜单，该菜单项一直保持高亮状态。

1、 本文的菜单链接是通过ul   li实现的：（_Layoutout.cshtml中）

<div class="navbar-collapse collapse">
                <ul class="nav navbar-nav" style="font-size:large;font-weight:bold;">
                    <li id="x">@Html.ActionLink("查询任务", "Index", "Home")</li>
                    <li id="y">@Html.ActionLink("查询进度", "OperationProcedure", "Home")</li>                    
                    <li id="z">@Html.ActionLink("联系方式", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>

2、 由于_Layoutout.cshtml没有方法接收从后台传过来的值（我没有找到可以从后台传值到_Layoutout.cshtml的方法，有知道的可以告诉我），所以单纯的处理li点击事件，只有在点击的时候可以改变颜色，点击之后就又回到默认的颜色了。这是因为点击事件发生在整个页面加载完之前，等页面加载完后用的是我们默认的css样式。

所以，解决方法就是在页面加载完后处理。这个时候就要用到我们的@ViewBag.Title，这个值很管用，它可以在_Layoutout.cshtml和自定义的页面之间随意传值。

上脚本处理代码：（_Layoutout.cshtml中）

<script type=text/javascript>
    $(document).ready(function () {
        var item = this.nameProp;
        var value;
        if (item == 'Home - 订单条码跟踪系统') { value = 'x' }
        if (item == 'OperationProcedure - 订单条码跟踪系统') { value = 'y' }
        if (item == 'Contact - 订单条码跟踪系统') { value = 'z' }
        d = document.getElementsByTagName('li')
        for (p = d.length; p--;) {
            if (d[p].id != value) {d[p].style.backgroundColor = ''}
            else {d[p].style.backgroundColor = '#d8ecfc';/*点击后背景色*/}
        }
    })
    </script>

不要怪我用整个@ViewBag.Title的内容，我也想用去字串，判断特殊字符在字串中的位置，无奈IE显示对象无法识别indexof方法或属性，所以直接就这样了。。。

上面代码都是调试通过的，放心使用。