爲什麼jQuery addClass不會更改css

我正在使用「active」類設置通過css更改顏色。爲什麼jQuery addClass不會更改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; 
}

來源

2013-11-15 Amy Neville

你的標題說它不會改變，但你的描述表明它確實如此。你問哪個？ – TreeTree

@Arun P Johny - 我已經定義了一個css規則。它在頁面加載時應用不同的顏色。當我使用jquery添加或刪除類時，它不會動態改變。 –

我們可以看到一些CSS嗎？ – TreeTree

的active類必須被分配到li元素，在你的情況下，它是share_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); 
    }); 

});

演示：Fiddle

來源

2013-11-15 17:27:46

我每天都從你們身上學到一些東西:) –

你改變<a>元素的類別，同時根據您的CSS，你應該改變<li>的類元素，其中包含<a>。

來源

2013-11-15 17:26:45 t0mppa

是的，再次感謝:) –

你需要做的是在你的CSS，你的.active類。

例如：

.active { 
    color: blue; 
}

，然後使用jQuery，撥動你的類，使用方法.toggleClass()。像這樣：

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

Check this JSFiddle我已經爲您創建了顯示此行爲。

來源

2013-11-15 17:27:56

爲什麼jQuery addClass不會更改css

回答

相關問題