Q:

Changing layout menu in ASP.NET MVC 3 razor

I have web based od ASP.NET MVC 3 Razor in which I have defined layout used in every page + rendered body, nothing special. All I want to do is highlight selected name page in menu.
So here's my simple main menu using < 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>

To my question: what is correct way to highlight selected < li > tag? I thought about using jQuery and do something like this:
$(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");
        }
    });
});

But it's not working properly. Function is called everytime < li > is clicked but background of < li > is not changed. I'm not sure if it is caused by loading layout later (and overwriting background property of this list).
Next way I thought abous is somehow pass data through the controller, but I think it's not needed for such a small thing. 
Every idea or thought is really appriciated!

A:

Inside event handler this refers to pure DOM object. You need to wrap it into $() to call jQuery functions on it (like 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");
        }
    });
});

Working fiddle

