Question

在我的MVC应用程序中我有一个左侧菜单，我需要活动链接css以在重新加载后保持样式

在我的CSS中我有

.navleft li a:hover {
    background: url('../Content/images/nav.png') no-repeat;
    background-position: -232px 0;
    color: #fff;
    left: -6px;
    padding: 19px 18px 19px 40px;
    margin-top: -10px;
}


.navleft li a:active {

 background: url('../Content/images/nav_active.png') no-repeat;
    background-position: -232px 0;
    color: #fff;
    left: -6px;
    padding: 19px 18px 19px 40px;
    margin-top: -10px;

}

在我看来

<ul class="navleft">
 @foreach (var item in Model.CLeftMenu.ToList())
 {

    foreach (var content in Model.LeftSiteContent.ToList())

      {
    if (item.LeftMenuID == content.LeftMenuID)
    {


 <li><a href="@Url.Action("Details", "LeftContents", new { id = 
 @content.LeftContentID })">@item.LeftMenuTitle</a></li>

     }
   }
 }

</ul>

动态构建菜单。悬停声明它工作正常，但没有活动。当我检查页面时，它会呈现

<a href="/LeftContents/Details/4" class="active">Services</a>

它使自己的类活跃。

当我将我的CSS更改为

时

.active {

 background: url('../Content/images/nav_active.png') no-repeat;
    background-position: -232px 0;
    color: #fff;
    left: -6px;
    padding: 19px 18px 19px 40px;
    margin-top: -10px;

 }

它有效。但是，我网站中的所有活动链接都采用了这种风格（这是合理的）。我怎么能只为左边的菜单做到这一点？我还需要申报当前吗？因为我读到伪代码：active只是用户点击该项目的那一刻。我看过这个css class active after page reload，但它对我不起作用。

谢谢

Answer 1

：活动CSS伪类表示用户正在激活的元素（例如按钮）。使用鼠标时，“激活”通常在用户按下主鼠标按钮时开始，在释放时结束。：active伪类通常用在和元素上，但也可以用在其他元素上。 enter link description here

没有：活跃 class需要定义为.active

.navleft li a:active rename to .navleft li a.active {

重新加载

1 个答案: