jQuery的addClass工作，但浏览器不适用新的类

所以，在我的页面上我有导航栏，有助于移动它。点击之后，我从之前的< li>中删除.active类，并将其添加到新的。在控制台中一切看起来不错，但在页面上有一个问题。我无法看到活动的< li>中的.active类属性，并且无法像点击之前那样滚动它。这是我的页面和代码： https://kreha6.github.io/MacopediaTask/ （很难形容什么究竟发生了:)）jQuery的addClass工作，但浏览器不适用新的类

$(document).ready(function() { 
    function scrollToId(id){ 
    id = id.replace("link", ""); 
    $('html,body').animate({ 
     scrollTop: $("#"+id).offset().top}, 
     'slow'); 
    } 

$("#navbar > ul > li > a").click(function(e) { 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
    e.preventDefault(); 
    scrollToId(this.id); 
}); 

});

SCSS：

.active{ 
    a{ 
    background-color: $transparent !important; 
    text-decoration: overline; 
    text-decoration-color: $color1; 
    } 
}

编辑：我改变了我的代码中加入类的父元素像这样：

$(this).parent().addClass('active');

引导增加活跃类< LI>这是一个的PA租金，我试图做同样的事情。由于某种原因，它不起作用。有人知道为什么

来源

2017-04-18 Kreha

这SCSS将转化为'。活跃了'选择目标的**了一个带班'.active'但你实际上是添加类内部的**元一个元素...然后什么都不会发生a.active中没有元素可以定位 – DaniP

以及你正在写它错在SCSS因为JQ

$("#navbar > ul > li > a").click(function(e) { $('.active').removeClass('active'); $(this).addClass('active');//here you add class active to the clicked 'a' element

所以a元素具有.active类上点击。但我从评论了解你想要的li有active类，所以使用

$(this).parents('li').addClass('active')

，并在CSS，你应该更具体，因为你可以有一些风格已经设置为li.active a，对于如写：

#navbar ul.nav li.active > a { /*styles*/ }

来源

2017-04-18 13:57:38

我需要添加.active类到父元素 - < li>（就像bootstrap一样）。我试过：$（this）.parent（）。addClass（'active'）; ，但它不起作用。任何想法为什么？ – Kreha

add $（this）.parents（'li'）。addClass（'active'） –

仍然不工作:( – Kreha

你需要的目标父DIV，试图改变$("#navbar > ul > li > a")与$("#navbar > ul > li")

$(document).ready(function() { 
    function scrollToId(id){ 
     id = id.replace("link", ""); 
     $('html,body').animate({ 
     scrollTop: $("#"+id).offset().top}, 
     'slow'); 
} 

$("#navbar > ul > li").click(function(e) { 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
    e.preventDefault(); 
    scrollToId(this.id); 
});

}）;

来源

2017-04-18 13:59:09 vlk

我看看你的网站，你的类没有针对性，改变他们在CSS做的方式，看我重视你的形象，没有。主动应用 ![enter image description here ]类1

如你所见灰色被重写，但是你的类在javascript中被应用。

来源

2017-04-18 14:05:49 Alireza

您可以编写脚本$(this).parent().addClass('active');

来源

2017-04-18 14:15:41

刚刚尝试过，但它不起作用。不知道为什么 – Kreha

jQuery的addClass工作，但浏览器不适用新的类

回答

相关问题