asp.net-mvc – 具有引导Navbar的MVC – 将所选项目设置为活动
发布时间:2020-12-16 00:40:51 所属栏目:asp.Net 来源:网络整理
导读:我正在学习Bootstrap,无法将选定的项目置于“活动”状态。活动状态保留在默认项目上。新选择/点击的项目会短暂更改为活动状态,但会恢复。我已经阅读了所有的帖子,仍然无法使此代码工作。我使用MVC5和JQuery 2.1。 编辑: 如果我将li的href更改为href =“#
我正在学习Bootstrap,无法将选定的项目置于“活动”状态。活动状态保留在默认项目上。新选择/点击的项目会短暂更改为活动状态,但会恢复。我已经阅读了所有的帖子,仍然无法使此代码工作。我使用MVC5和JQuery 2.1。
编辑: 标记 <div class="navbar-wrapper"> <div class="container"> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="navbar-brand" href="#">Test</a> </div> <div class="btn-group pull-right"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-user"></i>Login <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Profile</a></li> <li class="divider"></li> <li><a href="#">Sign Out</a></li> </ul> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="~/Home">Home</a></li> <li><a href="~/Home/About">About</a></li> <li><a href="~/Student">Students Sample</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="~/Admin/Home/Index"">Admin</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> </div> </div> <!-- /container --> </div> <!-- /navbar wrapper --> 脚本 <script type="text/javascript"> $(function () { $('.navbar-nav li').click(function () { $(this).addClass('active').siblings().removeClass('active'); }); }); </script> 编辑:这是我结束了在发布的答案和一些研究的帮助下做的。 public static string MakeActive(this UrlHelper urlHelper,string action,string controller,string area = "") { string result = "active"; string requestContextRoute; string passedInRoute; // Get the route values from the request var sb = new StringBuilder().Append(urlHelper.RequestContext.RouteData.DataTokens["area"]); sb.Append("/"); sb.Append(urlHelper.RequestContext.RouteData.Values["controller"].ToString()); sb.Append("/"); sb.Append(urlHelper.RequestContext.RouteData.Values["action"].ToString()); requestContextRoute = sb.ToString(); if (string.IsNullOrWhiteSpace(area)) { passedInRoute = "/" + controller + "/" + action; } else { passedInRoute = area + "/" + controller + "/" + action; } // Are the 2 routes the same? if (!requestContextRoute.Equals(passedInRoute,StringComparison.OrdinalIgnoreCase)) { result = null; } return result; } 解决方法
您必须检查您的控制器或根据当前网址查看哪个菜单项是活动的:
我有一个类似于这样的扩展方法: public static string MakeActiveClass(this UrlHelper urlHelper,string controller) { string result = "active"; string controllerName = urlHelper.RequestContext.RouteData.Values["controller"].ToString(); if (!controllerName.Equals(controller,StringComparison.OrdinalIgnoreCase)) { result = null; } return result; } 你可以在你的视图中使用它: <!-- Make the list item active when the current controller is equal to "blog" --> <li class="@Url.MakeActive("blog")"> <a href="@Url.Action("index","blog")">....</a> </li> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- asp.net-mvc – ASP.Net Mvc固定长度字符串数据注释
- asp.net – Telerik rad日期选择器在将来日期用户键时显示错
- asp.net-ajax – ASP.Net AJAX UpdatePanel无法触发Selecte
- asp.net-mvc – ASPNET MVC中的Modelbinding数据库实体
- ASP.NET IIS – 请求什么时候排队?
- asp.net – 检查是否在集成管道模式
- asp.net-mvc-3 – 如何重定向已登录的用户,该用户正在尝试访
- asp.net – 使用Excel VBA从aspx页面表中检索数据
- asp.net-mvc – 操作可能会破坏运行时的稳定性:LinqToSQL
- asp.net中的GridView分页问题
推荐文章
站长推荐
热点阅读