Jak dodać klasę aktywną, gdy kliknięto określony link przy użyciu bootstrap i jquery

Question

Próbuję dodać klasę do klikniętego menu nawigacji li za pomocą bootstrap i jquery. Po kliknięciu menu, klasa jest dodawana zgodnie z oczekiwaniami, ale nie jest związana z właściwością css - w konkretnym przypadku kolor czerwony - Poniżej znajduje się bardzo prosty przykład.

$(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

Spróbuj tego kodu -

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

i Ten CSS -

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

Oto skrzypce - https://jsfiddle.net/yLpn2nmb/3/

Answer 2

To może być inny styl, takich jak #navlist a { color: #000; } gdzie indziej jest kod, który jest nadrzędny swoją klasę .active:

Spróbuj zmienić:

.active { 
    color: red; 
} 

Do:

#navlist a.active { 
    color: red; 
} 

Lub:

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

To zwiększy specificity klasy, który powinien zastąpić wszelkie inne klasy, które mogą być unieważniając go.

UWAGA: Mówisz, że rzeczywista jQuery działa zgodnie z oczekiwaniami, więc skupiliśmy się wyłącznie na aspekcie CSS swoje pytanie ...

Answer 3

Spróbuj coś takiego

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

}); 

myślę, że jest co chcesz zdarzyć