Bootstrap CSS Navigation active

Question

Sur le site Bootstrap le subnav correspond avec les sections et change de couleur de fond que vous ou faites défiler à la section. Je voulais créer mon propre menu sans tous cependant, les couleurs de fond et tout, je changé mon CSS pour être similaire, mais quand je défiler vers le bas ou cliquez sur l'élément de menu de la classe active ne change pas. Je ne sais pas 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.css sont tous liés correctement. Dois-je ajouter un peu de jQuery supplémentaires ou que je manque un peu de CSS pour obtenir le actif pour passer comme le menu subnav sur leur site?

Answer 1

Pour changer la classe, vous devez effectuer un certain 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 cette aide.

Answer 2

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

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

Answer 3

est mon code pour gérer la liste de navigation bootstrap 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, selon la façon dont mon nav est structuré

Assurez-vous qu'aucun de vos liens ont de la classe active pour commencer.

liens réels

Si vos liens de nav sont sur les fichiers HTML séparés (comme un modèle de mise en page express.js qui a un menu), vous pouvez faire ceci:

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

liens de hachage

Si elles sont hash, 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 le hachage-clic, return 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 quelques-unes des autres réponses, si vous voulez que la page Web pour faire défiler vers le bas pour cette section lorsqu'un menu latéral est cliqué, alors vous ne voulez pas preventDefault.

En outre, vous ne devez supprimer la classe active en cours et ajouter une nouvelle recherche pas par de tout li. Vous voulez également le code pour ne pas faire quoi que ce soit lorsque l'élément de la liste que vous avez sélectionné est déjà actif pas ajouter inutilement et enlever la même classe active. Enfin, vous devez mettre votre écouteur d'événement sur l'un élément pas li car il a un temps plus facile de déclencher un événement de clic sur les iPhones et les tablettes, etc., peuvent également utiliser .delegate de sorte que vous ne devez pas attendre un événement prêt DOM. 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');
    }
});

Answer 6

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.

Answer 7

Je l'ai fait quelque chose de différent pour résoudre ce (FYI, je suis un html / css / js amateur complet).

Chacun de mes boutons va à la barre de navigation d'une nouvelle page. ainsi, dans le code HTML de chaque page, je mets quelque chose comme ça en bas:

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

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

Cela a obtenu fonctionner tout de suite pour moi.

P.S. J'ai essayé la réponse acceptée, mais pas eu de chance car il aurait besoin aussi de supprimer la classe « active » à partir du bouton actuellement actif pour vraiment « switch » sur. Je suis sûr qu'il est possible, mais encore une fois, je suis assez nouveau pour ce genre de choses.

Answer 8

et qu'il fonctionne très 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>

Answer 9

quiconque ayant des problèmes avec cela en utilisant jsp, regarder vos paquets.

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

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

à la réponse de modifier Konsumer:

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

Answer 10

J'ai essayé quelques-unes des meilleures réponses ci-dessus, il travaille pour la classe « .active », mais les liens ne fonctionnent pas bien, il reste des séjours sur la page en cours. Alors 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 ajouter la classe active li

Answer 11

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

Answer 12

Ajoutez à votre JavaScript:

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

Answer 13

Cela devient assez vieux et cluster avec des réponses, mais je pris la réponse de haut et fait mieux. La réponse de haut ne fonctionne que s'il y a une sur la page. Ce oscilloscopes à la suppression active des éléments de sibling et en ajoutant à celui que vous avez cliqué.

J'ai également ajouté nav-toggle de classe afin qu'il ne gêne pas les choses qui ont déjà js bootstrap attachés.

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