突出显示 ASP.NET Web 应用程序中的菜单栏

Question

我使用 ASP.NET Visual Studio 2010 和母版页构建了一个 Web 应用程序。正如您将看到的，该项目为我们提供了一个默认的菜单栏项。我在这些菜单栏上列出了 5 个页面（链接）。现在，当用户转到特定页面时，我想突出显示该菜单栏链接。我不知道该怎么做:(

我在母版页代码后面尝试了这个，但它也不起作用：

 foreach (MenuItem item in NavigationMenu.Items)
        {
            var navigateUrlParams = item.NavigateUrl.Split('/');
            if (Request.Url.AbsoluteUri.IndexOf(navigateUrlParams[navigateUrlParams.Length - 1]) != -1)
            {
                item.Selected = true;
            }
        }

在我的标记视图中我有这个：

 <div class="clear hideSkiplink">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"  OnMenuItemClick="NavigationMenu_MenuItemClick">
                <Items>
                    <asp:MenuItem Text="Test1"/>
                     <asp:MenuItem Text="Test2"/>
                     <asp:MenuItem  Text="Test3"/>

                </Items>
            </asp:Menu>
        </div>

所以基本上每当用户来到 Test1.aspx 页面时，我想要菜单项我应该如何做，

谢谢您的帮助！

Answer 1

使用CSS链接类来实现这一点：

http://www.w3schools.com/css/sel_active.asp

除非您“需要”对这些链接项执行一些编程操作，否则请改用 HTML 锚链接。将它们创建为列表项：

<ul class="menu">
    <li>
        <a href="~/Home" id="link1" title="First Link" runat="server">Link 1</a>
    </li>
</ul>

我所说的是询问此处是否需要控件（不熟悉您的项目），并尽可能保持标记简单。

Answer 2

首先确保您的菜单项都具有 Id 属性

在页面加载处理程序后面的母版页代码中执行类似以下

if (!Page.IsPostBack)
{
      if(Page is Default)
           liHome.Attributes["class"] += " active";

}

操作 在本例中，您将检查当前查看的页面的“类型”并将其附加到类属性中当前导航的链接。你可以为 active 定义一个 css 属性，例如

.active
{
    background-color: Red;
}