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的类

回答

相关问题