JavaScript的addClass似乎並沒有觸發我的css的類

我正在使用twitter bootstrap導航藥丸，並已改變背景顏色。首次加載頁面時，會放入正確的背景顏色。但是，當我的JavaScript文件更改爲「活動」後，它似乎沒有響應該CSS。JavaScript的addClass似乎並沒有觸發我的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 
});

來源

2016-05-16 Rawle Juglal

兩件事情：你的HTML標籤ul不具有id="navigation"，並且結果你e.target是<a />標籤，而不是thei r父母<li />您的風格設置爲。

所以添加id="navigation"和你addClass線切換到：

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

，你應該是好去。

編輯：這裏有一個Codepen也只是爲了說明：http://codepen.io/anon/pen/VaOmbz

來源

2016-05-17 00:43:23

感謝。特別是對於codepen。使您更容易看到您正在談論的概念。 –

沒問題。樂於幫助 –

JavaScript的addClass似乎並沒有觸發我的css的類

回答

相關問題