如何添加一個活動類，當一個特定的鏈接已被點擊使用引導和jquery

Question

我想添加一個類到點擊導航菜單利用引導和jQuery。 當我點擊一個菜單時，類是按預期方式添加的，但不是相關的css屬性 - 在特定情況下，顏色爲紅色 - 下面您可以找到一個非常簡單的示例。

$(document).ready(function() { 
 
    $('#navlist a').click(function(e) { 
 
     e.preventDefault(); 
 
     $('#navlist a').removeClass('active'); 
 
     $(this).addClass('active'); 
 
    }); 
 

 
    });

.nav { 
 
    color: green; 
 
} 
 
.active { 
 
    color: red; 
 
}

<ul class="list-unstyled" id="navlist"> 
 
    <li id="home"><a class="nav" href="#">Home</a> 
 
    </li> 
 
    <li id="about"><a class="nav" href="#">About Us</a> 
 
    </li> 
 
</ul>

fiddle

Answer 1

試試這個代碼是什麼 -

$(document).ready(function(){ 
       $('#navlist a').click(function(e) { 
       e.preventDefault(); 
       $('#navlist a').removeClass('active'); 
       $('#navlist a').addClass('nav'); 
       $(this).toggleClass('nav'); 
       $(this).toggleClass('active'); 
      }); 
}); 

和這個CSS -

a.nav:link { color: green; } 
a.active:link { color: red; } 

這裏是小提琴 - https://jsfiddle.net/yLpn2nmb/3/

Answer 2

這可能是另一種風格，如#navlist a { color: #000; }其他地方是你的代碼，該代碼重寫你的.active類：

嘗試改變：

.active { 
    color: red; 
} 

要：

#navlist a.active { 
    color: red; 
} 

或者：

#navlist a.nav.active { 
    color: red; 
} 

這將增加類的specificity，這應該重寫可以覆蓋它的任何其他類。

注意：您說的實際jQuery的工作正常，所以我已經完全專注於你的問題的CSS方面...

Answer 3

嘗試是這樣的

$(document).ready(function(){ 
$('.nav').click(function(e) { 
    e.preventDefault(); 
    $(this).removeClass('active'); 
    $(this).addClass('active'); 
}); 

}); 

我認爲這是你希望發生