Question

在我的导航栏中，我有一个包含span标记和＆lt; a＆gt;标签。但是，我很困惑，因为这是我的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>元素中添加一个类，并执行与此类对应的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>

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

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

希望这会对你有帮助!!!

在jQuery函数中选择类a：active span与a.active span？

1 个答案: