ASP.NET突出顯示所選菜單項

我試圖在我的導航面板中突出顯示所選MenuItem，但似乎無法理解爲什麼它不起作用。
下面是ASPX文件：ASP.NET突出顯示所選菜單項

<asp:Menu ID="Main_menu" runat="server" Orientation="Horizontal"> 
    <StaticSelectedStyle CssClass="nav_selected" /> 
    <StaticItemTemplate> 
      <div class="nav_style"> 
      <asp:Label runat="server" Text='<%# Eval("Text") %>' /> 
      </div> 
    </StaticItemTemplate> 
    <Items> 
      <asp:MenuItem NavigateUrl="~/home.aspx" Text="home" /> 
      <asp:MenuItem NavigateUrl="~/what-it-can-do.aspx" Text="what it can do" /> 
      <asp:MenuItem NavigateUrl="#" Text="pricing" /> 
      <asp:MenuItem NavigateUrl="#" Text="news & events" /> 
      <asp:MenuItem NavigateUrl="#" Text="partner with us" /> 
    </Items> 
</asp:Menu>

這裏的CSS文件：

.nav_selected 
    { 
     background-color:red; 
    } 
.nav_style 
    { 
     list-style:none; 
     background-color:#242C32; 
     border-radius:3px; 
     color:#F5F5F5;   
     border-top:4px solid #242C32; 
     border-bottom:4px solid #242C32; 
     border-left:12px solid #242C32; 
     border-right:12px solid #242C32; 
     font:14px calibri; 
    } 
.nav_style:hover 
    { 
     color:#0B8BBF; 
    }

編輯
的HTML渲染（希望這是正確的）：

    <a href="#PageHeader_Main_menu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=ILNNewtPvesYj-keR2OtzG1BUzU1n0CHnwnTQ2TLfIDO2cZBagUxjpSkZw3gSRJ6NvONia8D7dYw2ebl0erF93Ds_kQ1&amp;t=635201010537823876" width="0" height="0" style="border-width:0px;" /></a><div id="PageHeader_Main_menu"> 
    <ul class="level1"> 
     <li><a class="level1 selected" href="home.aspx"> 
          <div class="nav_style"> 
          <span>home</span> 
          </div> 
         </a></li><li><a class="level1" href="what-it-can-do.aspx"> 
          <div class="nav_style"> 
          <span>what it can do</span> 
          </div> 
         </a></li><li><a class="level1" href="#"> 
          <div class="nav_style"> 
          <span>pricing</span> 
          </div> 
         </a></li><li><a class="level1" href="#"> 
          <div class="nav_style"> 
          <span>news & events</span> 
          </div> 
         </a></li><li><a class="level1" href="#"> 
          <div class="nav_style"> 
          <span>partner with us</span> 
          </div> 
         </a></li> 
    </ul> 
</div><a id="PageHeader_Main_menu_SkipLink"></a>

來源

2014-05-13 Brezhnews

看到生成的實際html會很有用。 –

可能重複的[asp.net - 問題靜態選擇樣式的菜單選定的頁面]（http://stackoverflow.com/questions/7148872/asp-net-problems-with-static-selected-style-for -a-selected-page-on-the-menu） – DaveParsons

你還可以添加它呈現的html。 – Alok

看一看我已經爲您創建的fiddle。

否則，無法真正找到您的代碼的具體問題。

.nav_style 
{ 
    list-style:none; 
    font:14px calibri; 
    background-color: none; 
    padding: 10px; 
} 
.nav_style:hover 
{ 
    background-color:red; 
} 
.selected .nav_style{ 
    background-color: yellow; 
}

正如你看到的我用.selected .nav_style突出選定的選項卡。給那一槍。

哦..我沒有觸及你的標記。所以，風格應該工作。

來源

2014-05-14 07:51:12 Alok

謝謝，這個修正了它。 – Brezhnews

您的課程是「已選」，但您的風格是「nav_se lected」

<a class="level1 selected" href="home.aspx">

.nav_selected 
    { 
     background-color:red; 
    }

來源

2014-05-13 16:19:14 tintyethan

ASP.NET突出顯示所選菜單項

回答

相關問題