web-dev-qa-db-fra.com

Bootstrap CSS Navigation active

Sur le site Web Bootstrap, la sous-carte correspond aux sections et change de couleur d’arrière-plan lorsque vous naviguez jusqu’à la section. Je voulais créer mon propre menu sans toutes les couleurs d'arrière-plan et tout, mais j'ai modifié mon code CSS pour qu'il soit similaire, mais lorsque je fais défiler l'écran ou que je clique sur l'élément de menu, la classe active ne bascule pas. Pas sûr de ce que je fais mal. 

HTML:

<ul class="menu">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

CSS:

.menu {list-style:none;}
.menu > li {float: left;}
.menu > li > a {color:#555;float: none;padding: 10px 16px 11px;display: block;}
.menu > li > a:hover {color: #F95700;}
.menu .active > a, .menu .active > a:hover {color:#F95700;}

J'ai vérifié les dossiers; jQuery, bootstrap.js et bootstrap.css sont tous liés correctement. Dois-je ajouter du jQuery supplémentaire ou manque-t-il du code CSS pour permettre à l'actif de basculer comme le menu SubNav sur son site?

jqueryhtmlcsstwitter-bootstrap
43
user1029779

Pour changer de classe, vous devez exécuter du JavaScript.

Dans jQuery:

$('.menu li a').click(function(e) {
  var $this = $(this);
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});

En JavaScript:

var menu = document.querySelector('.menu');
var anchors = menu.getElementsByTagName('a');

for (var i = 0; i < anchors.length; i += 1) {
  anchors[i].addEventListener('click', function() { clickHandler(anchors[i]) }, false);
}

function clickHandler(anchor) {
  var hasClass = anchor.getAttribute('class');
  if (hasClass !== 'active') {
    anchor.setAttribute('class', 'active');
  }
}

J'espère que ça aide.

34
Nick Beranek

C'est ce que j'ai fini avec puisque vous devez effacer les autres aussi.

$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});
48
David

voici mon code pour gérer la liste de navigation bootstrap de Twitter:

$(document).ready(function () {
        $('ul.nav > li').click(function (e) {
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');                
        });            
    });
20
hbinduni

J'utilise 2 1-liners, en fonction de la structure de mon nav

Assurez-vous simplement qu'aucun de vos liens n'a de classe active pour commencer.

liens actuels

Si vos liens de navigation se trouvent dans des fichiers HTML distincts (comme un modèle de présentation dans express.js comportant un menu), vous pouvez procéder comme suit:

$('ul.nav > li > a[href="' + document.location.pathname + '"]').parent().addClass('active');

liens de hachage

Si ce sont des hashs, faites ceci:

$('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); });

Si vous ne voulez pas faire défiler sur hash-click, retournez false:

 $('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); return false; });
17
konsumer

Si vous examinez certaines des autres réponses, si vous souhaitez que la page Web défile jusqu'à cette section lorsqu'un menu latéral est cliqué, vous ne souhaitez pas preventDefault.

De plus, il vous suffit de supprimer la classe active en cours et d'en ajouter une nouvelle, mais pas de chercher dans toutes les li. Vous souhaitez également que le code ne fasse rien lorsque l'élément de la liste que vous avez sélectionné est déjà actif, pas pour ajouter et supprimer inutilement la même classe active. Enfin, vous devez placer votre écouteur d'événement sur l'élément a et non pas sur li, car il est plus facile de déclencher un événement click sur les iPhones et les tablettes, etc. Vous pouvez également utiliser .delegate pour ne pas avoir à attendre un événement DOM ready. Donc à la fin, je ferais quelque chose comme ça (je suppose que vous avez préchargé jQuery):

$('body').delegate('.menu li a', 'click', function(){
    var $thisLi = $(this).parents('li:first');
    var $ul = $thisLi.parents('ul:first');
    if (!$thisLi.hasClass('active')){
        $ul.find('li.active').removeClass('active');
        $thisLi.addClass('active');
    }
});
8
Mauvis Ledford

Je suggère ce code:

 <script>
      var curentFile = window.location.pathname.split("/").pop();
      if (curentFile == "") curentFile = "Default.aspx";
      $('ul.nav > li > a[href="' + curentFile + '"]').parent().addClass('active');
 </script>

C'est un travail comme un charme.

5
ali mahmoodi

J'ai fait quelque chose de différent pour résoudre ce problème (fyi, je suis un amateur complet en html/css/js). 

Chacun de mes boutons de la barre de navigation passe à une nouvelle page. Donc, dans chaque page HTML, j'ai mis quelque chose comme ceci en bas:

<script type="text/javascript">
    $(document).ready( function(){
       $("#aboutButton").removeClass("active");
    });

    $(document).ready( function(){
       $("#dashboardButton").addClass("active");
    });
</script>

Cela a fonctionné tout de suite pour moi.

P.S. J'ai essayé la réponse acceptée, mais je n'ai pas eu de chance, car il faudrait également supprimer la classe "active" du bouton actuellement actif pour vraiment "basculer". Je suis sûr que c'est possible, mais encore une fois, je suis assez novice dans ce domaine.

3
csturtz

Testé et ça marche bien.

    $('.navbar li').click(function(e) {
        $('.navbar li.active').removeClass('active');
        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }

    });

  <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            . . . 
  </ul>
3
Marios Nikolaou

si vous avez des problèmes avec cela avec jsp, surveillez vos paquets.

document.location.pathname m'a donné: /packagename/index.jsp

mais mon href dans ma barre de navigation appelée simplement index.jsp

Donc, pour éditer la réponse de konsumer:

$(document).ready(function() {
   var string = document.location.pathname.replace('/Package Name/','');
   $('ul.nav > li > a[href="' + string + '"]').parent().addClass('active');
} );
2
FredoAF

J'ai essayé quelques-unes des principales réponses ci-dessus, cela fonctionne pour la classe ".active", mais les liens ne fonctionnent pas bien, il reste toujours sur la page actuelle. Puis j'ai essayé ceci:

var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

Je l'ai trouvé ici: Twitter Bootstrap ajoute la classe active à li

1
whyisyoung
<ul class="main-menu">
    <li><a href="~/Cases/Index"><i class="fa fa-font fa-fw"></i><span class="text">Audit Case</span></a></li>
    <li><a href="~/Cases/Auditplan"><i class="fa fa-font fa-fw"></i><span class="text">Audit Plan</span></a></li>
    <li><a href="~/Cases/Auditreport"><i class="fa fa-font fa-fw"></i><span class="text">Audit Report</span></a></li>
    <li><a href="~/Cases/Company"><i class="fa fa-font fa-fw"></i><span class="text">Company Details</span></a></li>
</ul>

<script>
$(function(){
  $('.main-menu li > a[href="' + document.location.pathname + '"]').parent().addClass('active').siblings().removeClass('active');
})
</script>
1
Luke Bhangyi

Ajouter à votre JavaScript:

$(".menu li").click(function(e) {
    $(".menu li").removeClass("active");
    $(this).addClass("active");
    e.preventDefault();
});
0
Peter Tseng

Cela devient assez vieux et regroupe des réponses, mais j'ai pris la première réponse et l'ai améliorée. La réponse du haut ne fonctionne que s’il y en a une sur la page. Cela permet de supprimer les éléments actifs de sibling et de les ajouter à celui sur lequel vous avez cliqué.

J'ai également ajouté la classe nav-toggle afin qu'elle n'interfère pas avec les éléments auxquels jst bootstrap est déjà attaché.

$('.nav.nav-toggle li').click(function(e) {
  var $this = $(this);
  $this.siblings().removeClass('active');
  if (!$this.hasClass('active')) {
      $this.addClass('active');
  }
  e.preventDefault();
});
0
Tom Prats