asp.net自定義菜單每個項目

Question

我有一個小的ASP.NET應用程序（.NET Framework 4），我需要建立一個網站菜單，具有不同風格的不同項目。這樣的事情：

• ENTRY 1 - > css class「first」;
• ENTRY 2 - > css class「second」;
• ENTRY 3 - > css class「third」;

它們基本相同，唯一的區別是懸停的顏色。引擎蓋下，在ASP.NET總是生成一個HTML鏈接是這樣的：

我的問題是 - 我可以改變這個類的主要環節在菜單中的每個條目的？

我已經嘗試過這樣的事情：

<div class="topNav"> 
<asp:Menu ID="NavigationMenu" 
    runat="server" 
    EnableViewState="false" 
    IncludeStyleBlock="false" 
    Orientation="Horizontal" 
    MaximumDynamicDisplayLevels="0" 
    StaticDisplayLevels="1"> 

    <Items> 
     <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" Value="first"> 
     </asp:MenuItem> 
     <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" Value="second"/> 
    </Items> 
    <StaticItemTemplate> 
     <span class="<%#Eval("Value") %>"><%#Eval("Text") %></span> 
    </StaticItemTemplate> 
    <DynamicItemTemplate> 
     <span class="<%#Eval("Value") %>"><%#Eval("Text") %></span> 
    </DynamicItemTemplate> 
</asp:Menu> 

但由於鏈路內自動生成一個跨度 - 頁面的佈局是不正確的。該HTML看起來像這樣：

<ul class="level1"> 
    <li> 
    <a class="level1" href="Default.aspx"> 
     <span class="first">Home</span> 
    </a> 
    </li> 
    <li> 
    <a class="level1" href="About.aspx"> 
     <span class="second">About</span> 
    </a> 
    </li> 
</ul> 

這本來是不錯的，從「A」標記去掉「1級」，並以「第一」 /「第二」代替它（span標記消失）。

那麼......任何暗示/想法？

謝謝！

Answer 1

您可以使用jQuery這樣：

<script> 
    $(document).ready(function() { 

     function FixAnchor(cls) { 
      $('a.level1:has(' + "." + cls + ')').each(function() { 
       $(this).text = $('span' + '.' + cls).html(); 
       $(this).removeClass('level1').addClass(cls); 
       $('span' +'.' + cls).removeClass(cls); 
      }) 
     } 

     FixAnchor('first'); 
     FixAnchor('second'); 
    }); 
</script> 

而且不要忘記在頁面的頭部添加引用到的jQuery：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>