Bootstrap 4 barre de navigation active de la classe

J'ai commencé à apprendre la programmation web comme un projet et j'ai été un moment difficile à obtenir mes liens, pour montrer aussi actif sur la barre de navigation. J'ai commencer par la recherche des questions posées dans le passé, mais aucune réponse ne semblait régler mon problème.

Voici mon code

<div>
<hr>
<nav class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark" style="padding-left: 75px; margin-top: -16px;">
<ul class="navbar-nav">
<li class="active nav-item">
<a class="nav-link active" style = "padding-left: 0px; color: white;" href="#">Most Popular</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">Sports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">Science</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">Politics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">Economics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">Random</a> 
</li>
<li class="nav-item">
<a class="nav-link " style="padding-left: 480px; color: white; " href="#">Log in</a>
</li>
</ul>
</nav>
</div>

et j'ai essayé d'utiliser ce javascript, j'ai trouvé mais il n'a pas fonctionné jusqu'à présent

$('.nav li').click(function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
})

J'espère que mon code n'est pas trop funky depuis que je suis tout juste de commencer. Toute aide serait extrêmement apprécié, merci beaucoup!

InformationsquelleAutor kirkosaur | 2018-05-04
  1. 2

    Il existe de multiples problèmes...

    1. Le sélecteur $('.nav li') ne fait rien parce que vous n'avez pas de .nav
      classe utilisée n'importe où dans le balisage. Il devrait être $('.navbar-nav .nav-link").
    2. Vous avez style="color:white" sur les liens qui vous perdiez tous les changements que vous effectuez avec la active classe.
    3. Vous n'avez pas de CSS pour la classe active, et par défaut, Bootstrap active de la classe navbar-dark va être blanc. De quelle couleur êtes-vous en essayant de mettre en?
    4. Set active dans le nav-link au lieu de la batterie au lithium,
    .navbar-dark .nav-item > .nav-link.active  {
color:white;
}
$('.navbar-nav .nav-link').click(function(){
$('.navbar-nav .nav-link').removeClass('active');
$(this).addClass('active');
})

    Démo: https://www.codeply.com/go/I3EjDb74My

    • Merci beaucoup, je vais aller de l'avant et essayer ces changements, je souhaite que je pourrais upvote vous plus
    • fera pour sûr, le script ne fonctionne toujours pas, mais autre que celle de son parfait
    InformationsquelleAutor Zim