為什么jQuery addClass不會更改CSS

Question

我正在使用“活動”類設置通過CSS更改顏色。

我的問題是，當我使用jquery添加/刪除“活動”類時，為什么這些組件的顏色沒有改變？

$(document).ready(function() {

    $('#create_links_tab').click(function(){
        $('#share_links_tab').removeClass("active");
        $('#create_links_tab').addClass("active");
        $('#share_links_panel').hide();
        $('#create_links_panel').fadeIn(1500);
    });

    $('#share_links_tab').click(function(){
        $('#create_links_tab').removeClass("active");
        $('#share_links_tab').addClass("active");
        $('#create_links_panel').hide();
        $('#share_links_panel').fadeIn(1500);
    }); 

});

的HTML：

//left menu
echo "<div class=\"col-md-3\">";
echo "<ul class=\"nav nav-pills nav-stacked\">";
echo "<li class=\"active\"><a id=\"create_links_tab\" style=\"cursor:pointer;\"><i class=\"fa fa-plus\"></i>&nbsp;&nbsp;Create Links</a></li>";
echo "<li><a id=\"share_links_tab\" style=\"cursor:pointer;\"><i class=\"fa fa-search\"></i>&nbsp;&nbsp;Share Links</a></li>";
echo "</ul>";
echo "</div>";

CSS：

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
color: #fff;
background-color: #428bca;
}

Answer 1

您正在更改<a>元素的類，而根據CSS，您應該更改<a>所在的<li>元素的類。

Answer 2

必須將active類分配給li元素，在您的情況下，它是share_links_tab和create_links_tab元素的父create_links_tab

$(document).ready(function () {

    $('#create_links_tab').click(function () {
        $('#share_links_tab').parent().removeClass("active");
        $('#create_links_tab').parent().addClass("active");
        $('#share_links_panel').hide();
        $('#create_links_panel').fadeIn(1500);
    });

    $('#share_links_tab').click(function () {
        $('#create_links_tab').parent().removeClass("active");
        $('#share_links_tab').parent().addClass("active");
        $('#create_links_panel').hide();
        $('#share_links_panel').fadeIn(1500);
    });

});

演示： 小提琴

Answer 3

您需要在CSS擁有.active類。

例如：

.active {
  color: blue;
}

然后，使用jQuery，使用.toggleClass()方法切換您的類。 像這樣：

$('.element').click(function(){
  $(this).toggleClass('active');
});

檢查我為您創建的顯示此行為的JSFiddle 。