The problem at hand:
Upon clicking the menu in MVC3, a selected class is assigned. Unfortunately, this class is reset after the page reloads.
An attempt was made to resolve this issue using jQuery cookies, but the values are not being assigned correctly. The selected class is applied only after 2-3 clicks on the menu, not on the first click.
Here is an example of the menu:
<div class="wrap-nav">
<div class="menu">
<ul>
<li> @Html.ActionLink("Profile", "Index", "Profile") </li>
<li>@Html.ActionLink("Search", "Index", "Search") </li>
<li>@Html.ActionLink("Contacts", "ContactView", "Contact")</li>
<li>@Html.ActionLink("Log Out", "LogOut", "Profile") </li>
</ul>
</div>
</div>
The jQuery code snippet used is as follows:
$(document).ready(function () {
$("#Menu .wrap-nav .menu ul li a").click(function () {
$.cookie("selectedMenu", $(this).text());
});
$("#Menu .wrap-nav .menu ul li a").each(function () {
if ($(this).text() == $.cookie("selectedMenu")) {
$(this).parent().addClass("selected");
return false;
}
});
});
Any assistance on this matter would be greatly appreciated.