jQuery：更改菜单项点击CSS

我正在开发一个使用ASP.NET-MVC 4的应用程序。在这里，我在布局页面中动态加载菜单。我已经创建了一个局部视图，以动态加载的菜单和包含在布局页面如下：jQuery：更改菜单项点击CSS

MenuModel.cs：

public class MenuModel 
{ 
    public List<MainMenu> MainMenuModel { get; set; }   
} 

public class MainMenu 
{ 
    public int MainMenuID; 
    public string MainMenuName; 
    public string MainMenuController; 
    public string MainMenuAction; 
}

PartialController.cs：

using Insights.Models; 

[ChildActionOnly] 
public ActionResult LoadMenu() 
{ 
    MenuModel ObjMenuModel = new MenuModel(); 
    ObjMenuModel.MainMenuModel = new List<MainMenu>(); 
    ObjMenuModel.MainMenuModel = GetMainMenu(); 
    return PartialView(ObjMenuModel); 
} 

public List<MainMenu> GetMainMenu() 
{ 
    List<MainMenu> ObjMainMenu = new List<MainMenu>(); 
    var context = new InsightsEntities(); 
    ObjMainMenu = context.Insights_mMenu.Where(m => m.parentMenuUID == 0).Select(x => new MainMenu() 
     { 
      MainMenuID = x.menuUID, 
      MainMenuName = x.menuName, 
      MainMenuController = x.menuURLController, 
      MainMenuAction = x.menuURLAction 
     }).ToList(); 

     return ObjMainMenu; 
}

LoadMenu.cshtml ：（部分查看）

@model Insights.Models.MenuModel 

<link rel="stylesheet" href="~/MADMIN_files/style(2).css" /> 
<ul class="sidebar-menu on-click" id="main-menu"> 
<li class="active"> 
    <div class="sidebar-menu-item-wrapper"> 
     <a href="#"> 
      <i class="icon-home"></i> 
      <span>Home</span> 
     </a> 
    </div> 
</li> 
@{ 
    foreach (var MenuItem in Model.MainMenuModel) 
    { 

    <li class="active"> 
     <div class="sidebar-menu-item-wrapper"> 
      <a href='@Url.Action(@MenuItem.MainMenuAction, @MenuItem.MainMenuController)'><span>@MenuItem.MainMenuName</span></a> 
     </div> 
    </li> 

    } 
    } 
</ul>

_Layout.cshtml：

<div id="sidebar"> 
    @{ Html.RenderAction("LoadMenu", "Partial"); } 
</div>

这是我的屏幕：

屏幕显示属于菜单“报告”页面。在这里，我想突出显示点击菜单，将其CSS改为“活动”。有两类“活跃”和“非活动”。当我们动态加载菜单时如何实现这一点？

来源

2015-11-06 thevan

然后，您可以使用类似的方式来确定Child操作中的“Parent”操作和控制器名称。这可以与每个菜单项的值进行比较，以查看它是否确实是活动菜单项，如果是这样，则可以在菜单项上设置IsActive属性。然后，只需使用IsActive属性决定是否在呈现菜单时添加css类。

string actionName = this.ControllerContext.ParentActionViewContext.RouteData.Values["action"].ToString(); string controllerName = this.ControllerContext.ParentActionViewContext.RouteData.Values["controller"].ToString();

来源

2016-06-21 15:11:10 Milney

jQuery：更改菜单项点击CSS

回答

相关问题