Question

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

我在Master Page Code Behind上尝试了这个，但它也没有用：

 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页面时，我都希望突出显示Test1的菜单项。我该怎么做？

任何帮助将不胜感激！谢谢......

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";

}

在此示例中，您将检查当前查看页面的“类型”，并将其附加到当前导航链接的class属性。你可以为活跃的东西定义一个css属性，比如

.active
{
    background-color: Red;
}

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

2 个答案: