活动菜单项 – asp.net mvc3母版页
我一直在四处扫描，试图find一个合适的解决scheme，将“主动/当前”类分配给母版页的菜单项。 这条线是关于是否做这个客户端与服务器端分开。
实际上我对JavaScript和MVC都是新手，所以我没有意见。 我宁愿以“最干净”和最恰当的方式来做到这一点。
我有以下jQuery代码来分配“活动”类到<li>项…唯一的问题是“索引”或默认视图菜单项将始终被分配活动类，因为URL始终是一个子string其他菜单链接：
(default) index = localhost/ link 1 = localhost/home/link1 link 2 = localhost/home/link1 $(function () { var str = location.href.toLowerCase(); $('#nav ul li a').each(function() { if (str.indexOf(this.href.toLowerCase()) > -1) { $(this).parent().attr("class","active"); //hightlight parent tab } }); 有没有更好的方法做这个，伙计？ 至less有人会帮助我获得客户端版本的防弹？ 那么“索引”或默认链接总是“活跃”？ 有没有办法给索引方法分配一个假扩展？ 而不仅仅是基本的URL，它将是localhost/home/dashboard以便它不会是每个链接的子string？
实际上，我并不真正遵循做这个服务器端的方法，这就是为什么我试图用jQuery做客户端…任何帮助，将不胜感激。
一个自定义的HTML帮手通常会做的很好：
public static MvcHtmlString MenuLink( this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName ) { string currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action"); string currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller"); if (actionName == currentAction && controllerName == currentController) { return htmlHelper.ActionLink( linkText, actionName, controllerName, null, new { @class = "current" }); } return htmlHelper.ActionLink(linkText, actionName, controllerName); }
并在您的母版页：
<ul> <li>@Html.MenuLink("Link 1", "link1", "Home")</li> <li>@Html.MenuLink("Link 2", "link2", "Home")</li> </ul>
现在剩下的就是定义.current CSS类。
增加了对区域的支持：
public static class MenuExtensions { public static MvcHtmlString MenuItem(this HtmlHelper htmlHelper, string text, string action, string controller, string area = null) { var li = new TagBuilder("li"); var routeData = htmlHelper.ViewContext.RouteData; var currentAction = routeData.GetRequiredString("action"); var currentController = routeData.GetRequiredString("controller"); var currentArea = routeData.DataTokens["area"] as string; if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) && string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase) && string.Equals(currentArea, area, StringComparison.OrdinalIgnoreCase)) { li.AddCssClass("active"); } li.InnerHtml = htmlHelper.ActionLink(text, action, controller, new {area}, null).ToHtmlString(); return MvcHtmlString.Create(li.ToString()); } }
这是我解决这个问题的方法。
我创build了以下HtmlHelpers类的扩展方法：
public static class HtmlHelpers { public static string SetMenuItemClass(this HtmlHelper helper, string actionName) { if (actionName == helper.ViewContext.RouteData.Values["action"].ToString()) return "menu_on"; else return "menu_off"; }
然后，我有我的menublock。 它看起来像这样：
<div id="MenuBlock"> <div class="@Html.SetMenuItemClass("About")"> <a>@Html.ActionLink("About", "About", "Home")</a></div> <img height="31" width="2" class="line" alt="|" src="@Url.Content("~/Content/themehttp://img.dovov.commenu_line.gif")"/> <div class="@Html.SetMenuItemClass("Prices")"> <a>@Html.ActionLink("Prices", "Prices", "Home")</a></div> </div>
所以我的方法根据Home控制器的当前操作将类名返回给每个div。 您可以更深入地添加方法中的一个参数，该参数指定控制器的名称以避免出现问题，当您的操作具有相同的名称但控制器不同时。
通过JQuery你可以这样做：
$(document).ready(function () { highlightActiveMenuItem(); }); highlightActiveMenuItem = function () { var url = window.location.pathname; $('.menu a[href="' + url + '"]').addClass('active_menu_item'); }; .active_menu_item { color: #000 !important; font-weight: bold !important; }
原文： http ： //www.paulund.co.uk/use-jquery-to-highlight-active-menu-item
我通常做的是分配一个类到基于path部分的body标签。 所以，如果你做一个String.Replace的path将/ blogs / posts / 1到class =“blogs posts 1”。
然后，您可以分配CSS规则来处理该规则。 例如，如果您有一个“博客”的菜单项，你可以做一个像这样的规则
BODY.blogs li.blogs { /* your style */}
或者如果你想要一个特定的风格，如果你在一篇文章只有副作用，如果你在博客的根页面
BODY.blogs.posts li.blogs {/* your style */}
