每个项目的 asp.net 自定义菜单

Question

我有一个小型 ASP.NET 应用程序 (.NET Framework 4)，我需要构建一个网站菜单，其中包含具有不同样式的不同项目。像这样的：

• ENTRY 1 --> css 类“第一”；
• ENTRY 2 --> css 类“秒”；
• 条目 3 --> css 类“第三”；

它们基本相同，唯一的区别是悬停的颜色。在幕后，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”标签中删除“level1”并将其替换为“first”/“second”（以及 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>