asp.net mvc和css:选择时突出显示菜单选项卡

Question

有一个更好的方法吗？

我有一个HTML帮助扩展方法,检查当前选项卡菜单是否是所选的菜单,然后选择.selected css类.我把html.IsSelected链接放在每个li中

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

其中a是选项卡名称,b是ViewData分配.

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

Answer 1

我在我的一个项目中使用这种方法并且工作得很好.我在每个控制器中分配了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>

Answer 2

如果您可以接受 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";