Come aggiungere una classe attiva quando è stato fatto clic su un collegamento specifico utilizzando bootstrap e jquery

Question

Sto provando ad aggiungere una classe a un menu di navigazione con clic li usando bootstrap e jquery. Quando faccio clic su un menu, la classe viene aggiunta come previsto, ma non la relativa proprietà css - nel caso specifico il colore rosso - Di seguito è riportato un esempio molto semplice.

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

provare questo codice -

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

e questo CSS -

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

Ecco violino - https://jsfiddle.net/yLpn2nmb/3/

Answer 2

Potrebbe essere un altro stile, come ad esempio #navlist a { color: #000; } è altrove il codice che è prevalente la classe .active:

Provare a cambiare:

.active { 
    color: red; 
} 

A:

#navlist a.active { 
    color: red; 
} 

Oppure:

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

questo aumenterà la specificity della classe, che dovrebbe ignorare qualsiasi altra classe che potrebbe essere override di esso.

NOTA: Tu dici il vero jQuery funziona come previsto quindi mi sono concentrato esclusivamente sull'aspetto CSS della tua domanda ...

Answer 3

provare qualcosa di simile

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

}); 

Credo che questo sia ciò che si vuole che accada