Bootstrap CSS attivo Navigazione

Question

Sul sito Bootstrap il subnav corrisponde con sezioni e cambia colore di sfondo come voi o scorrere alla sezione. Ho voluto creare il mio menu senza tutti i colori di sfondo e tutto, però, ho cambiato il mio CSS per essere simile, ma quando ho scorrere verso il basso o fare clic sulla voce di menu la classe di attivo non cambia. Non sei sicuro di quello che sto facendo male.

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

Ho controllato i file; jQuery, bootstrap.js e bootstrap.css sono tutti collegati correttamente. Devo aggiungere un po 'jQuery ulteriore O mi manca un po' di CSS per ottenere l'attivo di passare come il menu subnav sul loro sito?

Answer 1

Al fine di cambiare la classe, è necessario eseguire alcuni JavaScript.

In jQuery:

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

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

Spero che questo aiuta.

Answer 2

Questo è quello che ho finito con poiché è necessario eliminare anche gli altri.

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

Answer 3

questo è il mio codice per la gestione lista di navigazione Twitter bootstrap:

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

Answer 4

Io uso 2 1-liners, a seconda di come il mio navigatore è strutturato

Basta fare in modo che nessuno dei vostri link hanno classe attiva per iniziare.

collegamenti effettivi

Se il vostro link nav sono file HTML separati (come un modello di layout in express.js che ha un menu), si può fare in questo modo:

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

link hash

Se sono hash, fare questo:

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

Se non si desidera scorrere su hash-click, 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

Guardando alcune delle altre risposte, se si desidera che la pagina web per scorrere verso il basso per quella sezione, quando un menu laterale si fa clic allora non si vuole preventDefault.

Inoltre, è solo bisogno di rimuovere la classe di attivo corrente e aggiungere uno nuovo, non cerca il Li. Volete anche il codice per non fare nulla, quando la voce di elenco che avete selezionato è già attivo, non inutilmente aggiungere e rimuovere la stessa classe attiva. Infine si dovrebbe mettere il vostro ascoltatore evento sul un elemento non li in quanto ha un tempo più facile di innescare un evento click su iPhone e tablet, ecc potrebbe anche usare .delegate in modo da non dover aspettare per un evento pronto DOM. Così alla fine mi piacerebbe fare qualcosa di simile (presumo che avete precaricato 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

Suggerisco questo codice:

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

E 'un lavoro come un fascino.

Answer 7

Ho fatto qualcosa di diverso per risolvere questo (FYI, io sono un / css / js amatoriale completo html).

Ognuno dei miei pulsanti della barra di navigazione va a una nuova pagina. così, in html di ogni pagina, ho messo qualcosa di simile alla parte inferiore:

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

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

Che ce l'ha a lavorare subito per me.

P.S. Ho provato la risposta accettata, ma non ha avuto fortuna, come sarebbe anche necessario rimuovere la classe 'attiva' dal pulsante attualmente attivo per davvero 'interruttore' finita. Sono sicuro che è possibile, ma ancora una volta, io sono abbastanza nuovo per questa roba.

Answer 8

Testato e funziona benissimo.

    $('.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

chiunque abbia problemi con questo utilizzando jsp, guardare i vostri pacchetti.

document.location.pathname mi ha dato: /packagename/index.jsp

, ma il mio href nella mia barra di navigazione chiamata appunto index.jsp

Quindi, per rispondere di modifica del konsumer:

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

Answer 10

Ho provato alcuni dei migliori risposte di cui sopra, funziona per la classe ".active", ma i collegamenti non funziona bene, rimane ancora sulla pagina corrente. Poi ho provato questo:

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

ho trovato qui: Twitter Bootstrap aggiungere classe attiva 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

Aggiungi alla tua JavaScript:

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

Answer 13

Questo sta diventando piuttosto vecchio e cluster con le risposte, ma ho preso la risposta superiore e ha reso migliore. La risposta superiore funziona solo se c'è uno sulla pagina. Questo ambiti per la rimozione attiva da elementi sibling e aggiungendolo a quello che si è fatto clic.

Ho anche aggiunto il nav-toggle classe in modo che non interferisca con le cose che hanno già js bootstrap allegati.

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