static asp 中的菜單項背景顏色：所選項目的菜單

Question

我正在使用 asp:menu 菜單系統在 asp.net 中工作。 當用戶選擇一個菜單項時，我希望背景顏色保持不變，以便他們知道他們在哪個選項卡中。我試圖通過 jquery 實現這一點，並在回發發生后覆蓋菜單項。 這是我的菜單邏輯。

div class="clear hideSkiplink"   >
                 <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" width="100%" BorderWidth="0px"  BackColor="Red">
    <%--                                 <staticmenustyle backcolor="LightSkyBlue"
          forecolor="Red"
          borderstyle="Solid"
          borderwidth="1"
          bordercolor="Red" />--%>
                      <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Refresh"/>
                        <asp:MenuItem NavigateUrl="~/Export.aspx" Text="Lock" />
                        <asp:MenuItem NavigateUrl="~/History.aspx" Text="History" />
                        <asp:MenuItem NavigateUrl="~/GLCostCenter.aspx" Text="GLCostCenter" />
                        <asp:MenuItem NavigateUrl="~/EnergyBorrowers.aspx" Text="EnergyBorrowers" />
                        <asp:MenuItem NavigateUrl="~/FinanceCompanies.aspx" Text="FinanceCompanies" />
                        <asp:MenuItem NavigateUrl="~/HvcreLoans.aspx" Text="HVCRELoans" />
                        <asp:MenuItem NavigateUrl="~/CommonObligors.aspx" Text="CommonObligors" />
                        <asp:MenuItem NavigateUrl="~/UnderwritingGuidelines.aspx" Text="UnderwritingGuideline" />
                        <asp:MenuItem NavigateUrl="~/ManualAdjustments.aspx" Text="ManualAdjustments" />
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                    </Items>
                </asp:Menu>

            </div>

在承保指南.aspx 中，我有

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script src="Scripts/jquery-3.5.1.js"></script>
    <link href="Scripts/jquery-ui.css" rel="stylesheet" />
    <script src="Scripts/jquery-ui.js"></script>
    <script>
        $(document).ready(function () {
            $('input[id*=txt_Status_Date]').datepicker({
                dateFormat: 'mm/dd/yy'
            });
            $('#dialogpass').css({ display: 'none' });
            //$('#NavigationMenu').css({ display: 'none' });
            $('#NavigationMenu').Children[8].css({ display: 'none' });
        });
    </script>
      <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<%--  <link rel="stylesheet" href="/resources/demos/style.css"/>--%>
  <script src="https://code.jquery.com/jquery-1.12.4.js" type="text/jscript"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/jscript"></script>
  <script type="text/jscript">
      $(function () {
          $("#dialog").dialog({ autoOpen: false, dialogClass: 'myTitleClass', modal: false });
      });
  </script>
</asp:Content>

在#NavigationMenu 下，我不知道如何指定UnderWriting Guidelines 菜單項將其塗成白色。 請幫忙。

Answer 1

您可以使用該事件

      <asp:menu id="NavigationMenu"
        staticdisplaylevels="2"
        staticsubmenuindent="10" 
        orientation="Vertical"
        onmenuitemclick="NavigationMenu_MenuItemClick"
        runat="server">

在代碼隱藏上：

 void NavigationMenu_MenuItemClick(Object sender, MenuEventArgs e)
  {
    // get id from the row and change the color
       e.Item.Selected = true;
  }

查看微軟官方文檔： https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.menu.menuitemclick?redirectedfrom=MSDN&view=netframework-4.8