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工作，但瀏覽器不適用新的類

回答

相關問題