Attiva il link alla barra di navigazione Bootstrap di Twitter

Qual è il modo standard per rendere in grassetto il collegamento attivo in una barra di navigazione Bootstrap di Twitter? È chiaro che un collegamento ottiene l’aspetto attivo acquisendo la class “triggers”. Ad esempio, il collegamento Home sottostante è attivo. Quando faccio clic su un collegamento nella barra di navigazione, dovrei usare jQuery per rimuovere tutte le classi dagli elementi li e quindi aggiungere la class active al link che ho id’d?

  

EDIT : ho incluso

  $('.nav li a').on('click', function() { alert('clicked'); $(this).parent().parent().find('.active').removeClass('active'); $(this).parent().addClass('active'); });  

dopo i collegamenti. L’avviso viene visualizzato quando faccio clic su un collegamento, ma la class “triggers” non viene aggiunta al collegamento.

Ecco tutto il mio HTML di barra di navigazione:

  

È necessario assicurarsi di impostare la class triggers come parte della risposta della richiesta (al caricamento della pagina) e non prima cioè quando l’utente fa clic su un collegamento per richiedere una pagina diversa.

Per prima cosa è necessario determinare quale navlink deve essere impostato come attivo e quindi aggiungere la class triggers a

  • . Il codice sarebbe simile a questo

    Testato dal richiedente :

    HTML all’interno del file php

    Chiama una funzione php in linea all’interno del markup

  • passa nella richiesta di destinazione dei collegamenti uri

      

    Funzione PHP

    La funzione php ha bisogno di confrontare la richiesta uri passata e se corrisponde alla pagina corrente che viene visualizzata come class triggers di output

      

    http://totalprogus.blogspot.sk/2013/12/bootstrap-add-active-class-to-li.html

    Questo tutorial ha una soluzione eccellente e definitiva per questo “problema”. Ho avuto a che fare un po ‘di tempo fa e ho lavorato alla grande anche per me, personalizzabile

     $(document).ready(function() { $('a[href="' + this.location.pathname + '"]').parent().addClass('active'); }); 

    Se non vuoi gestire il lato server e nel caso in cui tutti gli hrefs siano semplici, come ‘/page.php’, puoi chiamare

     $('.your-nav-container').find('a[href="' + location.pathname + '"]').parents('li').addClass('active'); 

    dopo che la pagina è stata caricata.

    Puoi provare:

     $('.nav li a').on('click', function() { $(this).parent().parent().find('.active').removeClass('active'); $(this).parent().addClass('active').css('font-weight', 'bold'); }); 

    Sarebbe meglio dare al tuo nav un attributo id , perché potresti avere più di un nav su una pagina con la class nav .

     $('#main-nav li a').on('click', function() { $(this).parent().parent().find('.active').removeClass('active'); $(this).parent().addClass('active').css('font-weight', 'bold'); }); 

    In alternativa, invece di usare .css('font-weight', 'bold') , puoi semplicemente metterlo nel foglio di stile:

     .active { font-weight: bold; } 

    Chris Moutray la tua risposta mi ha aiutato molto nello sviluppo del mio software (sto usando ZendFramework). Ho scritto questo helper vista:

      

    In questo caso chiamo questo helper nella vista così:

      activeOrNot ( "public" ); 

    Grazie!!

    Aggiungi il seguente script in fondo alla pagina:

      

    Puoi risolverlo con i CSS.

    Aggiungi una class al corpo di ogni pagina:

      

    O se sei nella pagina di contatto:

      

    Prendi questo in considerazione quando crei i tuoi stili:

     ul li:hover, body.home a.home, body.contact a.contact { background-color: #000; } ul li:hover a, body.home li.home a, body.contact li.contact a { color: #fff; } 

    Infine, applica i nomi delle classi agli elementi della tua lista:

      

    Questo punto, ogni volta che sei sulla pagina body.home, il tuo collegamento li.home avrà uno stile predefinito che indica che è la pagina corrente.

    Se assegni $ pageTitle al nome della pagina, puoi farlo senza javascript

      

    Basta inserire il codice qui sotto nella sezione “testa”.

      

    ovviamente non dimenticare la tua chiamata a jquery.js prima.

    E il tuo: