Bootstrap CSS Navigation active

Question

Sur le Bootstrap site web de la subnav matches avec les sections et les changements de couleur de fond que vous ou faites défiler jusqu'à la section. J'ai voulu créer mon propre menu sans toutes les couleurs d'arrière-plan et tout et tout, cependant, j'ai modifié mon CSS pour être similaire, mais quand je scroll vers le bas ou cliquez sur le menu de l'élément de l'actif de la classe de ne pas basculer. 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 fichiers; jQuery, bootstrap.js et bootstrap.les css sont tous reliés correctement. Dois-je ajouter du jQuery ou suis-je manque un peu de CSS pour obtenir de l'actif de commutateur, comme le subnav menu sur leur site?

Answer 1

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();
});
 

Answer 2

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.

Answer 3

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

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

Answer 4

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; });
 

Answer 5

En regardant certains des autres réponses, si vous voulez que la page web, faites défiler jusqu'à la section lorsqu'un menu est cliqué, alors vous ne voulez pas preventDefault.

En outre, vous avez seulement besoin de supprimer l'actuelle classe active et en ajouter un nouveau pas rechercher à travers toutes les li. Vous aussi vous voulez le code pour ne pas faire n'importe quoi lors de l'élément de la liste que vous avez sélectionné est déjà actif-pas inutilement d'ajouter et de supprimer la même classe active. Enfin, vous devriez mettre votre écouteur d'événement sur un élément à ne pas la li comme il est plus facile de temps de déclenchement d'un événement de clic sur les iPhones et tablettes, etc. Pourrait également utiliser .delegate de sorte que vous n'avez pas à attendre pour un DOM prêt de l'événement. 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');
    }
});