0

私は小さな ASP.NET アプリケーション (.NET Framework 4) を使用しており、さまざまなスタイルのさまざまなアイテムを含む Web サイト メニューを作成する必要があります。このようなもの：

  • エントリ 1 --> css クラス「最初」;
  • ENTRY 2 --> css クラス "second";
  • エントリ 3 --> css クラス「3 番目」;

それらは基本的に同じで、唯一の違いはホバリングの色です。内部では、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 タグをなくすために）。

それで...ヒント/アイデアはありますか？

ありがとう！

4

1 に答える 1

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>
于 2013-08-29T01:42:53.413 に答える