【问题标题】:Targeting an active link in CSS定位 CSS 中的活动链接
【发布时间】:2012-04-09 22:09:52
【问题描述】:

我写了一个自定义的 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>

正如我所说,我知道它正在工作,我似乎无法定位“活动”类,即使它存在......

【问题讨论】:

标签: asp.net html css asp.net-mvc-3


【解决方案1】:

你放了一个.active,你应该像悬停一样使用“:”。 a:active

编辑:重新阅读您的问题后,您的意思是为链接到用户当前所在页面的菜单项的自定义 css 类吗?在这种情况下,按照我使用 ASP 的方式,它会自动为您处理这些菜单项。否则,我看不到您将该类分配给菜单项的位置?这肯定是第一个问题。

【讨论】:

  • 这不是我要找的。 a:active 仅适用于单击后的链接。我可以将我真正想要的任何东西称为“活跃”,我只是选择了它。我有一个 C# 类,如果它是当前页面(基于 routeData),它会创建一个链接 。所以假设我称它为“currentPage”......我该如何让它工作?
  • 就像我在编辑中注意到的那样,我没有看到您将自定义类添加到菜单项的位置?我习惯于在没有 MVC 的情况下使用 ASP..
  • 它是通过自定义 HtmlHelper 添加的,我认为它是特定于 MVC 的。基本上,它查看 routeData 并能够根据控制器和操作(特定于 MVC)分离 URL,并在其放置的位置输出 html。所以在我的例子中,它接受了文本(主页)、操作(索引)和控制器(主页)......恰好是网站的主页,所以它在 html 中添加了一个链接元素,如下所示...... . Home 我似乎无法定位那个类?
  • 你能显示将链接添加到 html 的特定 ASP 代码吗?您是否还通过检查浏览器中的源代码来验证它实际上在输出 html 中?
  • 我讨厌我的生活。谢谢...之后我实际上尝试了“当前”,并意识到这不会更明智...然后使用“currentPage”,它就像一个魅力...感谢您指出这一点:)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-11-29
  • 1970-01-01
  • 1970-01-01
  • 2013-09-30
  • 2016-11-19
  • 1970-01-01
相关资源
最近更新 更多