title: jQuery : Change Menu Item CSS on click
body: <p>I am developing an application using ASP.NET-MVC 4. Here, I am dynamically loading the menu in the layout page. I have created a partial view to load the menus dynamically and included that in the layout page as follows:</p>
  
  <p>MenuModel.cs:</p>
  
  <pre><code>public class MenuModel
  {
      public List&lt;MainMenu&gt; MainMenuModel { get; set; }        
  }
  
  public class MainMenu
  {
      public int MainMenuID;
      public string MainMenuName;
      public string MainMenuController;
      public string MainMenuAction;
  }
  </code></pre>
  
  <p>PartialController.cs:</p>
  
  <pre><code>using Insights.Models;
  
  [ChildActionOnly]
  public ActionResult LoadMenu()
  {
      MenuModel ObjMenuModel = new MenuModel();
      ObjMenuModel.MainMenuModel = new List&lt;MainMenu&gt;();
      ObjMenuModel.MainMenuModel = GetMainMenu();
      return PartialView(ObjMenuModel);
  }
  
  public List&lt;MainMenu&gt; GetMainMenu()
  {
      List&lt;MainMenu&gt; ObjMainMenu = new List&lt;MainMenu&gt;();
      var context = new InsightsEntities();
      ObjMainMenu = context.Insights_mMenu.Where(m =&gt; m.parentMenuUID == 0).Select(x =&gt; new MainMenu()
          {
              MainMenuID = x.menuUID,
              MainMenuName = x.menuName,
              MainMenuController = x.menuURLController,
              MainMenuAction = x.menuURLAction
          }).ToList();
  
          return ObjMainMenu;
  }
  </code></pre>
  
  <p>LoadMenu.cshtml: (Partial View)</p>
  
  <pre><code>@model Insights.Models.MenuModel
  
  &lt;link rel="stylesheet" href="~/MADMIN_files/style(2).css" /&gt;
  &lt;ul class="sidebar-menu on-click" id="main-menu"&gt;
  &lt;li class="active"&gt;
      &lt;div class="sidebar-menu-item-wrapper"&gt;
          &lt;a href="#"&gt;
              &lt;i class="icon-home"&gt;&lt;/i&gt;
              &lt;span&gt;Home&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  @{
      foreach (var MenuItem in Model.MainMenuModel)
      {
  
      &lt;li class="active"&gt;
          &lt;div class="sidebar-menu-item-wrapper"&gt;
              &lt;a href='@Url.Action(@MenuItem.MainMenuAction, @MenuItem.MainMenuController)'&gt;&lt;span&gt;@MenuItem.MainMenuName&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  
       }
    }
  &lt;/ul&gt;
  </code></pre>
  
  <p>_Layout.cshtml:</p>
  
  <pre><code>&lt;div id="sidebar"&gt;
       @{ Html.RenderAction("LoadMenu", "Partial"); }
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my screen:
  <a href="https://i.stack.imgur.com/Eykpv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Eykpv.jpg" alt="enter image description here"></a></p>
  
  <p>The screen shows the page which belongs to the Menu "Reports". Here, I want to highlight the clicked menu by changing its css as "active". There are two classes "active" and "inactive". How to achieve this when we load the menus dynamically?</p>