突出顯示在ASP.Net菜單中選中的選項卡

Question

我想用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; 
} 

Answer 1

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> 

而且，你將需要刪除menuattribute IncludeStyleBlock="false"，因爲它「指示ASP.NET是否應該呈現級聯樣式表（CSS）定義的塊是樣式在菜單中使用。「

其他有用的鏈接：

• asp:MenuItem/CSS
• StaticMenuItemStyle vs. StaticSelectedStyle - Does one overwrite the other?

Answer 2

您需要設置選定的菜單項手動

NavigationMenu.Items(i).Selected = True 

我創建了一個功能，使突出更輕鬆。

SelectMenuByValue("Value2", NavigationMenu) 

它將MenuItem和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

Answer 3

這是一個可行的解決方案： * 腳本 *

個

<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 }