Question

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

ENTRY 1 - ＆gt; css class“first”;
ENTRY 2 - ＆gt; css class“second”;
参赛作品3 - ＆gt; 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>

将“level1”从“a”标记中删除并将其替换为“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>

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

1 个答案: