4

我正在尝试用不同的颜色突出显示 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;
}
4

3 回答 3

5

这是一个可行的解决方案： *脚本*

<script language="javascript" type="text/javascript">

   $(function () {
        // this will get the full URL at the address bar
        var url = window.location.href;

        // passes on every "a" tag 
        $("#cssmenu a").each(function () {
            // checks if its the same on the address bar
            if (url == (this.href)) {
                $(this).closest("li").addClass("active");
            }
        });
        $("#header a").each(function () {
            // checks if its the same on the address bar
            if (url == (this.href)) {
                $(this).closest("li").addClass("active");
            }
        });

    });
</script>

标记

使用 div 列出项目id ="cssmenu"

<div id='cssmenu'>
    <ul>
       <li><a href="../Admin/dashboard.aspx"><span>Dashboard</span></a></li>
       <li><a href="../Admin/Report.aspx"><span>Reports</span></a></li>
       <li><a href="../Admin/Shop.aspx"><span>Shop</span></a></li>
       <li><a href="../Admin/system.aspx"><span>System</span></a></li>
    </ul>
</div>

样式表

#cssmenu ul {
    list-style-type: none;
    width: auto;
    position: relative;
    display: block;
    height: 33px;
    font-size: .6em;
    background: url(images/bg.png) repeat-x top left;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    border: 1px solid #000;
    margin: 0;
    padding: 0;
}

#cssmenu li {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
}

#cssmenu li a {
    float: left;
    color: #A79787;
    text-decoration: none;
    height: 24px;
    padding: 9px 15px 0;
    font-weight: normal;
}

#cssmenu li a:hover,
#cssmenu .active {
    color: #fff;
    background: url(images/bg.png) repeat-x top left;
    text-decoration: none;
}

#cssmenu .active a {
    color: #fff;
    font-weight: 700;
}

#cssmenu ul { background-color: #629600 }
#cssmenu li a:hover,
#cssmenu li.active { background-color: #7AB900 }
于 2013-02-12T10:16:21.403 回答
4

This answer to ASP.NET: Highlight menu item of current page should provide the solution you're after.

Basically, you'll need to use the Menu.StaticSelectedStyle Property. There's an example in the answer link above and in the documentation.

Example Snippet

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

        [...]
</asp:menu>

Also, you will need to remove the menu attribute IncludeStyleBlock="false" as it " indicates whether ASP.NET should render a block of cascading style sheet (CSS) definitions for the styles that are used in the menu."

Other helpful links:

于 2013-02-12T00:13:20.233 回答
2

您需要手动设置 Selected MenuItem

NavigationMenu.Items(i).Selected = True

我创建了一个函数来使突出显示更容易。

SelectMenuByValue("Value2", NavigationMenu)

它将 MenuItem 的 Value 和 Menu 控件实例作为参数。

<asp:Menu ID="NavigationMenu" runat="server">
<Items>
    <asp:MenuItem Text="Parent1" Value="ParentValue">
        <asp:MenuItem Text="SubMenu1" Value="Value1" NavigateUrl="~/Page1.aspx" />
        <asp:MenuItem Text="SubMenu2" Value="Value2" NavigateUrl="~/Page2.aspx" />
        <asp:MenuItem Text="SubMenu3" Value="Value3" NavigateUrl="~/Page3.aspx" />
    </asp:MenuItem>
</Items>

后面的代码：

Public Sub SelectMenuByValue(ByVal sValue As String, ByVal NavigationMenu As Menu)
Dim iMenuCount As Integer = NavigationMenu.Items.Count - 1
For i As Integer = 0 To iMenuCount
    Dim menuItem As MenuItem = NavigationMenu.Items(i)
    If menuItem.Value = sValue Then
        If menuItem.Enabled AndAlso menuItem.Selectable Then menuItem.Selected = True
        Exit For
    End If
    If CheckSelectSubMenu(menuItem, sValue) Then Exit For
Next
End Sub

Private Function CheckSelectSubMenu(ByVal menuItem As MenuItem, ByVal sValue As String) As Boolean
    CheckSelectSubMenu = False
    Dim iMenuCount As Integer = menuItem.ChildItems.Count - 1
    For i As Integer = 0 To iMenuCount
        Dim subMenuItem As MenuItem = menuItem.ChildItems(i)
        If subMenuItem.Value = sValue Then
            CheckSelectSubMenu = True
            If subMenuItem.Enabled AndAlso subMenuItem.Selectable Then subMenuItem.Selected = True
            Exit For
        End If
        If CheckSelectSubMenu(subMenuItem, sValue) Then
            CheckSelectSubMenu = True
            Exit For
        End If
    Next
End Function

参考：来自论坛ASP.NET 4 : Highlight menu item for current page

于 2013-02-12T02:02:17.423 回答