jquery - 在 jQuery 函数中选择类 a :active span vs. a.active 跨度？

Question

在我的导航栏中，我有一个包含 span 标签和 标签的元素。但是，我很困惑，因为这是我的 CSS:

a span {
    color:#ffffff;  
}
a:hover *.caret {
    color:#bdbcae;
}
a:active span {
    color:#bdbcae;
}
a:active *.caret {
    color:#bdbcae;
}

现在，它的工作方式是每当我单击链接周围的框时，例如导致菜单下拉，链接根据以下 CSS 更改颜色:

a:active span {
    color:#bdbcae;
}

这很好，但我也想切换这个类，但我不知道如何切换。我之前问过similar question ，但没有人给我一个直接的答案。

如果，比方说，我想在链接中添加或删除此类，我该怎么做，即我的函数应该是什么样子，因为我已经尝试过了

$("span").removeClass("active");

但是由于“a:active”，这并没有做任何事情。我对如何执行此操作感到非常困惑。那么，有人可以向我解释如何做到这一点吗？

Here's my Bootply .

HTML:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">         
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <div class="collapse navbar-collapse navHeaderCollapse">

            <ul class="nav navbar-nav navbar-right">                            
                <li class="dropdown">   
                    <a href="page.html" class="dropdown-toggle" data-toggle="dropdown"><span>Link</span><b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                    </ul><!-- END: "dropdown-menu" -->      
                </li><!-- END: "dropdown" -->

            </ul>
            <!-- END: "collapse navbar-collapse navHeaderCollapse" -->
        </div><!-- END: "container" -->
    </div><!-- END: "container" -->
</div><!-- END: "navbar navbar-inverse navbar-fixed-top" -->

Answer 1

在你的CSS中，:active不代表一个类，它是元素的一种状态。

因此，为了实现您的要求，您需要向 <a> 添加一个类element和做对应这个类的css。

a.myClass span {
    color:#ffffff;  
}
a.myClass:hover *.caret {
    color:#bdbcae;
}
a:active span {
    color:#bdbcae;
}
a.myClass:active *.caret {
    color:#bdbcae;
}

并添加myClass到您的 html 元素。

<a class="myClass"> Test </a>

现在您可以删除 myClass使用 jquery，

$("span").removeClass("myClass");

希望这对你有帮助!!!