javascript addClass没有'似乎没有触发类的css

我正在使用twitter引导程序导航药丸，并更改了背景颜色。当页面第一次加载时，它会放置正确的背景色。但是，在我的javascript文件更改了li的"活动"后，它似乎没有响应css。

HTML

<ul class="nav nav-pills">
  <li id="About" role="presentation" class="active"><a href="#">About</a></li>
  <li id="Animals" role="presentation"><a href="#">Animals</a></li>
  <li id="Adoptly" role="presentation"><a href="#">Adoptly</a></li>
  <li id="Blog" role="presentation"><a href="#">Blog</a></li>
  <li id="Events" role="presentation"><a href="#">Events</a></li>
</ul>

CSS

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color:white !important;
    background-color:#FF4571 !important;
}

Javascript

 function checkWidth() {
    var windowsize = $(window).width();
    var current = document.getElementsByClassName('active');
    var displayText = current[0].textContent;
    if (windowsize > 425) {
        //if the window is greater than 440px wide then turn on jScrollPane..
        $( "#navigation" ).empty();
        $( "#navigation" ).html(pillsHTML);
        checkActive(displayText,true);
    }
    else
        {
           $( "#navigation" ).empty();
           $( "#navigation" ).html(listHTML);
           checkActive(displayText,false);
        }
}
function checkActive(currentTab, bool){
    console.log(bool);
    if(bool)
        {
           $('li').removeClass('active');
           var element = document.getElementById(currentTab);
           $(element).addClass('active');
        }
    else
        {
            $('.list-group-item').removeClass('active');
            var element = document.getElementById(currentTab);
            $(element).addClass('active');
        }
}
checkWidth();
// Bind event listener
$( window ).resize(checkWidth);
$('#navigation').on('click','li',function(e){
  var previous = $(this).closest(".nav").children(".active");
  previous.removeClass('active'); // previous list-item
  $(e.target).addClass('active'); // activated list-item
});