CODEWITHSUNDEEP
jqueryhtmlcssasp.net-mvc-3razor
OutOfSpaceHoneyBadger
OutOfSpaceHoneyBadger

Reputation: 1048

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!

Upvotes: 1

Views: 2158

Answers (2)

Richard Raby
Richard Raby

Reputation: 106

I seem to remember it's not something as simple as doing .id once inside jQuery. Use an attribute selector for jQuery instead.

$(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");
        }
    });
});

However, I think this is the wrong approach. Once you know that the current item has been clicked, the switch on id is irrelevant. I would do something a simple as give it a class when it's been active, making sure to remove the class from previous ones.

$(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; }

Upvotes: 1

Andrei
Andrei

Reputation: 56716

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

Upvotes: 1

Related Questions