web-dev-qa-db-fra.com

Bootstrap 4 navbar classe active

J'ai commencé à apprendre la programmation Web en tant que projet et j'ai eu du mal à faire en sorte que mes liens s'affichent comme actifs sur la barre de navigation. J'ai commencé par chercher des questions similaires posées dans le passé, mais aucune des réponses ne semblait résoudre 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 que j'ai trouvé mais cela n'a pas fonctionné jusqu'à présent

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

Espérons que mon code ne soit pas trop génial puisque je ne fais que commencer. Toute aide serait grandement appréciée, merci beaucoup!

twitter-bootstrapnavbar
4
kirkosaur

Il y a plusieurs problèmes ...

  1. Le sélecteur $ ('. Nav li') ne fait rien car vous n'avez pas de .nav classe utilisée n'importe où dans le balisage. Il doit s'agir de $ ('. Navbar-nav .nav-link').
  2. Tu as style="color:white" sur les liens qui remplaceront toutes les modifications que vous effectuez avec la classe active.
  3. Vous n'avez pas de CSS pour la classe active, et par défaut Bootstrap la classe active sur navbar-dark va être blanche. Quelle couleur essayez-vous de définir?
  4. Activer dans le nav-link au lieu du li,
.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

7
Zim
// active nav

// get current url
var location = window.location.href;

// remove active class from all
$(".navbar .nav-item").removeClass('active');

// add active class to div that matches active url
$(".nav-item a[href='"+location+"']").addClass('active');
1
user3748820