1

我有基于 Web 的 od ASP.NET MVC 3 Razor，我在其中定义了每个页面 + 渲染正文中使用的布局，没什么特别的。我要做的就是在菜单中突出显示选定的名称页面。

所以这是我使用 < ul > 的简单主菜单

<ul id="menu">
    <li id="1">@Html.ActionLink("menu1", "menu1", "Home")</li>
    <li id="2">@Html.ActionLink("menu2", "menu2", "Home")</li>
    <li id="2">@Html.ActionLink("menu3", "menu3", "Home")</li>
</ul>

对于我的问题：突出显示选定 <li> 标签的正确方法是什么？我考虑过使用 jQuery 并执行以下操作：

$(document).ready(function () {
    $("#menu li").click(function () {
        if (this.id == "1") {
            this.css("background","#CCCCCC");
        }
        else if (this.id == "2") {
            this.css("background","#CCCCCC");
        }
        else if (this.id == "3") {
            this.css("background","#CCCCCC");
        }
    });
});

但它不能正常工作。每次点击<li>都会调用函数，但<li>的背景不会改变。我不确定它是否是由稍后加载布局（并覆盖此列表的背景属性）引起的。

下一个我认为 abous 的方法是以某种方式通过控制器传递数据，但我认为这么小的事情不需要它。

每一个想法或想法都是真正的appriciated！

4

2 回答 2

1

内部事件处理程序this是指纯 DOM 对象。您需要将其包装成$()在其上调用 jQuery 函数（如css）：

$(document).ready(function () {
    $("#menu li").click(function () {
        if (this.id == "1") {
            $(this).css("background","#CCCCCC");
        }
        else if (this.id == "2") {
            $(this).css("background","#CCCCCC");
        }
        else if (this.id == "3") {
            $(this).css("background","#CCCCCC");
        }
    });
});

工作小提琴

于 2013-08-20T12:32:08.420 回答
1

我似乎记得这并不像在 jQuery 中执行 .id 那样简单。改为使用 jQuery 的属性选择器。

$(document).ready(function () {
    $("#menu li").click(function () {
        if (this.attr['id'] == "1") {
            this.css("background","#CCCCCC");
        }
        else if (this.attr['id'] == "2") {
            this.css("background","#CCCCCC");
        }
        else if (this.attr['id'] == "3") {
            this.css("background","#CCCCCC");
        }
    });
});

但是，我认为这是错误的做法。一旦您知道当前项目已被单击，则打开 id 就无关紧要了。我会做一些简单的事情，比如在它处于活动状态时给它一个类，确保从以前的类中删除该类。

$(document).ready(function () {
    $("#menu li").click(function () {
        // Remove class from others
        $("li.activeNav").removeClass("activeNav");

        // Add class to the one clicked
        $(this).addClass("activeNav");
    });
});

CSS：

li.activeNav { background-color: #cccccc; }
于 2013-08-20T12:39:48.830 回答