Bootstrap CSS Actif de Navigation

Pour passer de la classe, vous devez effectuer certaines JavaScript.

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

c'est mon code pour la manipulation de twitter bootstrap liste de navigation:

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

Regarder quelques-unes 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');
    }
});

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

Chacun de mes boutons de la barre de navigation passe à une nouvelle page. ainsi, dans chaque page html, j'ai mis quelque chose comme ça à la base:

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

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

Qui l'a obtenu le droit de travailler loin pour moi.

P. S. j'ai essayé la accepté de répondre, mais n'a pas de chance comme il serait également nécessaire de supprimer les "actifs" de la classe à partir de la touche vraiment "switch" plus de. Je suis sûr que c'est possible, mais encore une fois, je suis assez nouveau à ce genre de choses.

toute personne ayant des problèmes avec cela à l'aide de jsp, de regarder vos paquets.

document.emplacement.chemin m'a donné: /nom_du_paquet/index.jsp

mais ma href dans ma barre de navigation appelé tout à l'index.jsp

Donc à modifier konsumer réponse:

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

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

C'est plus très jeune et regroupés avec les réponses, mais j'ai pris le haut de réponse et il fait mieux. La réponse sommet ne fonctionne que si il y a une sur la page. Cette étendues à la suppression active de sibling éléments et en l'ajoutant à celui sur lequel vous avez cliqué.

J'ai également ajouté de la classe nav-toggle de sorte qu'il n'interfère pas avec les choses qui ont déjà bootstrap js ci-joint.

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