Question

使用OC v1.5.6.4 我希望将标题菜单的css状态保持为点击后单击

我将其作为菜单：

<div id="m">
  <ul>
  <li><a href="#">Contact Us</a></li>
  <li><a href="#">Store</a>
        <div>
            <ul>
               <li><a href="#">Man</a></li>
               <li><a href="#">Woman</a></li>
               <li><a href="#">Accessories</a></li>
            </ul>
          </div>
   </li>
  </ul>
</div>

css 所以：

#m > ul > li > a {
    text-decoration: none;
}
#m > ul > li:hover > a {
    color:#000 !important;
}
#m > ul >  li > a.clicked {
    color: #823428;
    border-bottom: #823428 2px solid !important;;
}
#m > ul > li > div > ul > li > a {
    text-decoration: none;
}

我有jQuery脚本：

$(document).ready(function() {
$("a").click(function(e) {
    $("a", $("#menu")).each(function () {
        if( $(this).hasClass("clicked") )
            $(this).removeClass("clicked");
    });

    $(this).addClass("clicked");
    });
});

在释放鼠标按钮之前单击链接时，它会转到a.selected 但是在鼠标单击释放后，它不会保存类状态。

我做错了什么？它是重新加载的页面吗？例如：

Working example - not working

jsfiddle - working great

Answer 1

什么。这正是a:active所做的

：主动选择器用于选择和设置活动链接的样式。

单击链接后，链接将变为活动状态。

http://www.w3schools.com/cssref/sel_active.asp

Answer 2

单击后不会保留:active状态。

如果您希望链接保持与:active状态相同的颜色，或者变为其他颜色，则您希望使用:visited状态。

#m > ul >  li > a:visited {
    color: #823428;
}

OpenCart css a.clicked显示并消失

2 个答案: