asp.net mvc 和 css：让菜单选项卡在选择时保持突出显示答案

【问题标题】：asp.net mvc and css: Having menu tab stay highlighted on selectionasp.net mvc 和 css：让菜单选项卡在选择时保持突出显示
【发布时间】：2010-10-03 06:45:26
【问题描述】：

有没有更好的方法来做到这一点？

我有一个 HTML 帮助程序扩展方法，它检查当前选项卡菜单是否是选定的，然后选择 .selected css 类。我把每个 li 中的 html.IsSelected 链接作为

<li class="<%=Html.IsSelected(string a, string b)%>" >

其中 a 是选项卡名称，b 是分配的 ViewData。

这样干净还是有更好的方法？

【问题讨论】：

标签： .net html asp.net-mvc css

【解决方案1】：

如果您可以使用 javascript 解决方案，请查看 jQuery UI Accordion 插件如何处理此问题。本质上，您可以通过在页面加载时检查请求 url 来根据控制器选择突出显示的选项卡。

或者，您可以为每个选项卡设置一个与选项卡的类值相对应的 ViewBag 项。将当前选项卡的值设置为活动的 css 类，将其他选项卡的值设置为空（或它们的默认值）。然后你可以使用：

<li id="HomeTab" class="<%= ViewBag.HomeTabClass %>" />
<li id="OtherTab" class="<%= (string)ViewBag.OtherTabClass %>" />

然后，您可以在控制器中为 ViewData 变量设置适当的值。

ViewBag.HomeTabClass = "tab activeTab";
ViewBag.OtherTabClass = "tab";

【讨论】：

这就是我所做的，使用 ViewData 来分配类。您会说 java 解决方案因任何特定原因而更高效或更好吗？
使用 javascript 解决方案使您不必为每个操作添加代码来设置正确的选项卡，尽管我想您可以通过在 OnActionExecuting 中实现基本相同的东西。使用 javascript 的缺点是如果关闭 javascript，它就会损坏。
如果我有超过五个菜单项和子项，我该如何使用您的答案？
@ElvinArzumanoğlu 我认为手风琴可以支持的项目数量没有任何限制。我仍然认为我会使用带有 named 选项卡的 ViewBag（我已更新）方法。另一种选择（更糟糕的是，我认为因为你失去了意义）是使用一组类名（例如string[]），其顺序与选项卡的顺序相同，并对其进行索引。
@ElvinArzumanoğlu 我过去做过类似的事情。我会说“它取决于” - 辅助方法更多地依赖于约定，并且可以限制您以您不喜欢的方式使用/命名选项卡，但它肯定是一种更清洁的方法。

【解决方案2】：

你也可以看看之前的建议：

An easy way to set the active tab using controllers and a user control in ASP.NET MVC?

【讨论】：

【解决方案3】：

我在我的一个项目中使用了这种方法，并且效果很好。我在每个控制器中分配了 ViewData["Home"] = "activeTab" 类，并在视图中使用空字符串的默认值，如下所示。如果采用该 viewData 字典的值，这将使选项卡处于活动状态。很简单也很干净。

您的家庭控制器将如下所示：

        ViewData["Home"] = "activeTab";

        return View("Index");
    }

视图将如下所示：

<li class="<%= ((string)ViewData["Home"] ?? "") %>"><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li class="<%= ((string)ViewData["About"] ?? "") %>"><%= Html.ActionLink("About", "About", "Home")%></li>

【讨论】：

【解决方案4】：

我试图让它工作但没有运气。

你的 CSS 是什么样的？我的在下面。

.activeTab { 背景：#FFFFFF；颜色：#000000; }

我将它与母版页而不是主页视图一起使用，不确定这是否会影响它。

【讨论】：