javascript addClass, похоже, не запускает мой css для класса

Question

Я использую twitter bootstrap nav-pills и изменил цвет фона. Когда страница сначала загружается, он помещает правильный цвет фона. Но после изменения файла 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 
}); 

Answer 1

Две вещи здесь: Ваш ul тег в HTML не имеет id="navigation", и результат ваших e.target - это теги <a />, а не thei r parent <li />, для которого настроены ваши стили.

Так добавить id="navigation" и переключить addClass строку:

$(e.target).closest('li').addClass('active'); 

И вы должны быть хорошо идти.

Edit: Вот Codepen, а просто для иллюстрации: http://codepen.io/anon/pen/VaOmbz