2

適用するカスタム HtmlHelper を作成しました...

class = "active"

それが現在のページの場合、メニュー項目に。ソースを表示した後、これが正しく機能していることはわかっていますが、現在の設定では、スタイルを適用するために .active クラスをターゲットにすることができないようです。

現在の HTML

<ul id="menu">
    <li>@Html.MenuItem("Home", "Index", "Home")</li>
    <li>@Html.MenuItem("About", "About", "Home")</li>
</ul>

現在の CSS

#menu { width: 100%;
      padding: 0;
      margin: 0;
      list-style-type: none;
      padding-top: 6px; }

#menu a { width: 100%;
            font-weight: bold;
            text-decoration: none;
            color: #ffffff;
            padding: 6px 8px 6px 8px;
            text-shadow: 1px 1px 1px #8292a2; }

#menu a:hover { background-color: #e8eff6; color: #2a3744; text-shadow: 1px 1px 1px #e8eff6; }

#menu li { display: inline; }

ここで具体性の問題が発生していると思いますが、「アクティブな」クラスを対象にして、任意のタイプのスタイルを適用することはできないようです。

#menu a.active
#menu li a.active

何も機能していないようです。何か案は？

編集: 私が使用しているカスタム HtmlHelper

public static class MenuExtensions
    {
        public static MvcHtmlString MenuItem(
            this HtmlHelper htmlHelper,
            string text,
            string action,
            string controller
        )
        {
            string value;
            var routeData = htmlHelper.ViewContext.RouteData;
            var currentAction = routeData.GetRequiredString("action");
            var currentController = routeData.GetRequiredString("controller");
            if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &&
                string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase))
            {
                value = htmlHelper.ActionLink(text, action, new { controller = controller }, new { @class = "active" }).ToHtmlString();
                return MvcHtmlString.Create(value.ToString());
            }

            value = htmlHelper.ActionLink(text, action, controller).ToHtmlString();
            return MvcHtmlString.Create(value.ToString());
        }
    }

ソース表示によるHTML出力

<ul id="menu">
   <li><a class="active" href="/">Home</a></li>
   <li><a href="/Home/About">About</a></li>
</ul>

私が言ったように、私はそれが機能していることを知っています.「アクティブな」クラスが存在していても、それをターゲットにできないようです...

4

1 に答える 1

3

a.activeを配置する場合は、ホバーの場合と同じように「：」を使用する必要があります。a:active

編集：質問を読み直した後、ユーザーが現在表示しているページにリンクするメニュー項目のカスタムcssクラスを意味しましたか？その場合、私がASPを使用する方法では、ASPがそれらのメニュー項目を自動的に処理します。そうでなければ、そのクラスをメニュー項目のどこに割り当てているのかわかりませんか？それは確かに最初の問題です。

于 2012-04-09T22:16:49.513 に答える