突出显示ASP.Net菜单中的选定选项卡

发布时间：2020-12-16 03:58:57 所属栏目：asp.Net 来源：网络整理

导读：我试图用不同的颜色高亮显示ASP.NET菜单中的选定选项卡.这样做似乎很简单,但首先我无法使其工作,其次我到目前为止找不到一个好的工作示例. ASP / HTML div class="clear hideSkiplink" asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableV

我试图用不同的颜色高亮显示ASP.NET菜单中的选定选项卡.这样做似乎很简单,但首先我无法使其工作,其次我到目前为止找不到一个好的工作示例.

ASP / HTML

<div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="False"
                    IncludeStyleBlock="false" Orientation="Horizontal">

                    <Items>
                        <asp:MenuItem NavigateUrl="~/ReadMe.aspx" Text="Read Me" />
                        <asp:MenuItem NavigateUrl="~/Summary.aspx" Text="Summary" />
                        <asp:MenuItem NavigateUrl="~/Detail.aspx" Text="Detail" />
                    </Items>
                </asp:Menu>
  </div>

CSS

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: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;

    color: #cfdbe6;
    text-decoration: none;
}

解决方法

This answer至 ASP.NET: Highlight menu item of current page应提供您所追求的解决方案.

基本上,您需要使用Menu.StaticSelectedStyle Property.上面的答案链接和文档中有一个示例.

示例代码段

<asp:menu [...]>
        <staticselectedstyle backcolor="LightBlue"
          borderstyle="Solid"
          bordercolor="Black"
          borderwidth="1"/>

        [...]
</asp:menu>

此外,您还需要删除菜单attribute IncludeStyleBlock="false",因为它“表示ASP.NET是否应该为菜单中使用的样式呈现级联样式表(CSS)定义块.”

其他有用的链接：

> asp:MenuItem / CSS
> StaticMenuItemStyle vs. StaticSelectedStyle – Does one overwrite the other?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!