3

C# コード ビハインドを使用して、ASP.NET でカスタム asp:menu コントロールを構築しています。それは私のウェブサイトへのサイトマップに基づいています。メニューの基本は次のとおりです。

<%@ Control language="C#" autoeventwireup="true" codefile="Control.ascs.cs" inherits="menuClass" %>
<asp:menu id="myMenu" datasourceid="sitemap" runat="server">
    <staticmenuitemstyle font-underline="true" />
    <staticselectedstyle font-bold="true" font-underline="false" />
</asp:menu>

クリックしたメニュー項目を太字にして下線を付けず、他のすべての項目に下線を付けたいことは明らかです。問題は、選択した項目が太字になるにもかかわらず、すべての項目に下線が引かれていることです。

興味深いテストは、両方の下線付きブール値を交換することでした。その結果、選択したアイテムには下線が引かれましたが、他のすべてのアイテムには下線が引かれませんでした。これは予想される結果ですが、私が直面している問題を考えると混乱します。

この問題を回避するために cssclass 属性を使用しようとしましたが、役に立ちませんでした。ありがとう。

4

1 に答える 1

3

秘訣は、CssClass を使用し、CSS をハイパーリンク (「a」要素) のみに適用し、ASP.NET がメニュー項目を表示するために使用する周囲の HTML テーブルには適用しないことです。探している動作を示す自己完結型のコード サンプルを次に示します。

<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <style type="text/css">
    .notSelected a
    {
        text-decoration:underline;
    }
    .selected a
    {
        font-weight:bold;
        text-decoration:none;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:menu id="myMenu" runat="server">
            <StaticMenuItemStyle CssClass="notSelected" />
            <StaticSelectedStyle CssClass="selected" />
            <Items>
                <asp:MenuItem Text="Test (selected)" Selected="true" NavigateUrl="~/Default.aspx"></asp:MenuItem>
                <asp:MenuItem Text="Test (not selected)" NavigateUrl="~/Default.aspx"></asp:MenuItem>
            </Items>
        </asp:menu>
    </div>
    </form>
</body>
</html>

この問題の根本的な原因は、ブラウザーが同じ A 要素に適用された異なる CSS クラスで定義された複数の競合するテキスト装飾スタイルを処理する方法と、同じスタイルが適用されている親からの継承をブラウザーが処理する方法にあるようです。(ASP.NET のメニュー コントロールは内部で CSS クラスを使用して、font-underline の「属性」のような「インライン」スタイルを定義し、親要素と同じスタイルを A 要素にも適用します。ソース HTML を表示してください。上記の私のサンプルまたはあなたのコードから出力され、それがどのように機能するかをよりよく理解できます.)

問題の原因を絞り込もうとしていたときに、ネストされた CSS トリックに出くわしました。A 要素だけに CSS を適用すると、結合がうまくいくようです。おそらく実験によって、生成された HTML に対してソースを表示し、各要素に適用される CSS クラスのスタイルを選択的に変更することによって、基本的なルールを推測できます。

継承と競合が CSS クラスでどのように機能するかについて CSS 仕様を解読することもできますが、実験はより簡単になると思います。:-)

于 2009-11-13T16:43:31.933 に答える