jQuery的addClass有效但浏览器不应用新类

Question

所以，在我的页面上，我有导航栏，可以帮助它移动它。点击后我从之前的＆lt;删除.active类。李＆GT;并把它给新的。在控制台中一切看起来不错，但在页面上有一个问题。我在活动＆lt;中看不到.active类属性。李＆GT;并且在点击之前滚动它不像以前那样工作。这是我的页面和代码： https://kreha6.github.io/MacopediaTask/ （很难描述究竟发生了什么:)）

$(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');

Bootstrap将活动类添加到＆lt;李＆GT;这是一个父母，我试着做同样的事情。由于某种原因，它不起作用。谁知道为什么？

Answer 1

你在SCSS写错了，因为在JQ中

plotOutput("plot1", brush = "plot_brush") 

因此，$("#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

并且在CSS中你应该更具体，因为你可以为$(this).parents('li').addClass('active') 设置一些样式，例如写：

li.active a

Answer 2

您需要定位父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);
});

}）;

Answer 3

我查看您的网站，您的课程没有针对性，改变他们在CSS中完成的方式，查看我为您附加的图片，课程.active未应用] 1

如您所见，灰色颜色被覆盖，但您的类在javascript中应用。

Answer 4

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