asp.NET - 菜单上选定页面的静态选定样式问题

Posted 2023-03-06

【中文标题】asp.NET - 菜单上选定页面的静态选定样式问题

【英文标题】：asp.NET - Problems with Static Selected Style for a Selected Page on the menu

【发布时间】：2011-11-01 05:00:55

【问题描述】：

我正在使用带有 C# 的 asp.NET 4.0，并且最近为我的本地 Web 应用程序创建了一个自定义设计。我希望当一个页面被选中时，它具有不同的背景颜色（通常在纯 html + css 中，我们只是将一个菜单项设置为活动状态）。我尝试使用但它不起作用，它保持与其他颜色相同的颜色。有人有这方面的经验吗？

Site Master 中的代码：

            <h2>Dashboard</h2>
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Vertical" >
                <StaticSelectedStyle CssClass="selectedMenu" /> 
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="View Submissions"/>
                    <asp:MenuItem NavigateUrl="~/Imports.aspx" Text="Import"/>
                    <asp:MenuItem NavigateUrl="~/Submission.aspx" Text="Insert Submission"/>
                    <asp:MenuItem NavigateUrl="~/Reports.aspx" Text="Reports"/>
                    <asp:MenuItem NavigateUrl="~/CurrencyMaintenance.aspx" Text="Currency Maintenance" />
                    <asp:MenuItem NavigateUrl="~/Remittance.aspx" Text="Remittance" />
                </Items>
            </asp:Menu>

CSS：

/* TAB MENU   
----------------------------------------------------------*/
div.hideSkiplink

    background-color:#3a4f63;
    width:100%;


div.menu

    padding: 4px 0px 4px 8px;


div.menu ul

    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;


div.menu ul li a, div.menu ul li a:visited

    background-color: #FFF; /*680840*/
    border: 1px #4e667d solid;
    height: 20px;
    width: 175px;
    color: #000; /*FFF*/
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;


div.menu ul li a:hover

    background-color: #680840;
    color: #FFF;
    text-decoration: none;


.selectedMenu

    background-color: #680840 !important;
    color: #FFF !important;
    text-decoration: none !important;


div.menu ul li a:active

    background-color: #680840;
    color: #cfdbe6;
    text-decoration: none;

这就是它在悬停时的样子，我希望在选中时也有类似的效果。

【参考方案1】：

这似乎是 .NET 菜单的一个错误。有一些关于此here 的信息。然后您可能想要做的是删除 staticSelectedStyle 属性并将其添加到您的 css 中：

.menu a.static.selected

    background-color: #680840 !important;
    color: #FFF !important;
    text-decoration: none !important;

您可能还需要在主页面加载中添加一些代码来确定应该选择哪个项目，如下所示：

protected void Page_Load(object sender, EventArgs e)

    string path = Request.AppRelativeCurrentExecutionFilePath;
    foreach (MenuItem item in NavigationMenu.Items)
    
        item.Selected = item.NavigateUrl.Equals(path, StringComparison.InvariantCultureIgnoreCase);
    

【讨论】：

谢谢老兄，解决了，我一直在尝试解决这个问题，你发现了:)

谢谢它也解决了我的问题。

很好，但是当路径为“~/xyz.aspx”时失败。这样效果更好： item.Selected = item.NavigateUrl.Equals(Right(path, item.NavigateUrl.Length), StringComparison.InvariantCultureIgnoreCase)

smirkingman 的解决方案使用方法 Right()，它是一个 VB 函数。在 C# 中使用不是很好，而是使用函数 SubString()。