javascript - 事件链接在重新加载后丢失样式

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

:active CSS 伪类代表一个被用户激活的元素(比如按钮)。使用鼠标时，“激活”通常在用户按下鼠标主键时开始，在松开时结束。 :active 伪类通常用在 和 元素上，但也可以用在其他元素上。 enter link description here

没有 :active 类需要定义为.active

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