Twitter Bootstrap agrega clase activa a li

Usando twitter bootstrap, y necesito iniciar clase activa a la parte de li de la navegación principal. Automáticamente. Usamos php no ruby.

Navegación de muestra:

 

El código de Bootstrap es el siguiente:

 
  • Home
  • Así que solo necesitamos descubrir cómo agregar la clase activa a la página actual. He examinado casi todas las respuestas en Stack, sin mucha alegría.

    Yo había jugado con esto:

     /*menu handler*/ $(function(){ var url = window.location.pathname; var activePage = url.substring(url.lastIndexOf('/')+1); $('.nav li a').each(function(){ var currentPage = this.href.substring(this.href.lastIndexOf('/')+1); if (activePage == currentPage) { $(this).parent().addClass('active'); } }); }) 

    Pero no hay alegría.

    Este código nunca me traicionó. Todavía funciona bien.

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

    Logramos solucionarlo al final:

     /*menu handler*/ $(function(){ function stripTrailingSlash(str) { if(str.substr(-1) == '/') { return str.substr(0, str.length - 1); } return str; } var url = window.location.pathname; var activePage = stripTrailingSlash(url); $('.nav li a').each(function(){ var currentPage = stripTrailingSlash($(this).attr('href')); if (activePage == currentPage) { $(this).parent().addClass('active'); } }); }); 

    Realmente no necesitas ningún JavaScript con Bootstrap:

       

    Para realizar más tareas después de seleccionar el elemento del menú, necesita JS tal como lo explican otras publicaciones aquí.

    Espero que esto ayude.

    Si pones

     data-toggle="pill" 

    en la etiqueta debería funcionar automáticamente.

    http://twitter.github.com/bootstrap/javascript.html#tabs

    leer debajo de Marcar

    Esto hizo el trabajo para mí, incluidos los menús desplegables principales activos y los niños activos (gracias a 422):

     $(document).ready(function () { 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').parent().parent().addClass('active'); }); 

    Si está utilizando un marco MVC con rutas y acciones:

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

    Como se ilustra en esta respuesta por Christian Landgren: https://stackoverflow.com/a/13375529/101662

    Esto funciona bien para mi. Marca elementos de navegación simples y elementos de navegación desplegables como activos.

     $(document).ready(function () { var url = window.location; $('ul.nav a[href="' + this.location.pathname + '"]').parent().addClass('active'); $('ul.nav a').filter(function() { return this.href == url; }).parent().parent().parent().addClass('active'); }); 

    Pasar this.location.pathname a $('ul.nav a[href="'...'"]') marca también elementos de navegación simples. Pasar url no funcionó para mí.

    Prueba esto.

     // Remove active for all items. $('.page-sidebar-menu li').removeClass('active'); // highlight submenu item $('li a[href="' + this.location.pathname + '"]').parent().addClass('active'); // Highlight parent menu item. $('ul a[href="' + this.location.pathname + '"]').parents('li').addClass('active'); 

    En caso de que estés utilizando Boostrap en Angulajs: esta es una directiva simple que funciona para mí (porque la información-alternar citada por Kam no está incluida en Angular-ui). Hope puede ayudar.

     app.directive("myDataToggle", function(){ function link(scope, element, attrs) { var e = angular.element(element); e.on('click', function(){ e.parent().parent().children().removeClass('active'); e.parent().addClass("active"); }) } return { restrict: 'A', link: link }; }); 

      

    La solución es simple y no hay necesidad de servidor o ajax, solo necesitas jQuery y Bootstrap. En cada página agrega una id a la etiqueta del body . Use esa id para encontrar una etiqueta que contenga el nombre de la página (valor de una etiqueta).

    Ejemplo:

    https://stackoverflow.com/questions/11533542/twitter-bootstrap-add-active-class-to-li/page1.html

         

    https://stackoverflow.com/questions/11533542/twitter-bootstrap-add-active-class-to-li/page2.html

         

    script.js

      

    ¡Muchas gracias a Ben! Youtube

    Aquí está el ejemplo completo de arranque de Twitter y la clase activa aplicada en función de la cadena de consulta.

    Pocos pasos a seguir para lograr la solución correcta:

    1) Incluye el último archivo javascript jquery.js y bootstrap.js.

    2) Incluye el último archivo bootstrap.css

    3) Incluye querystring-0.9.0.js para obtener el valor de la variable de cadena de consulta en js.

    4) HTML:

      

    JQuery en Script Tag:

     $(function() { $(".nav li").click(function() { $(".nav li").removeClass('active'); setTimeout(function() { var page = $.QueryString("page"); $(".nav li:eq(" + page + ")").addClass("active"); }, 300); }); }); 

    He terminado el bin completo, así que por favor haz clic aquí http://codebins.com/bin/4ldqpaf

    Ninguno de estos funcionó para mí. La configuración de mi Bootstrap navega a páginas separadas (por lo que no puedo hacerlo en una acción de clic, pero la clase activa se elimina en la navegación a una página nueva) y mis URL no coinciden exactamente. Así que esto es lo que hice, basado en mi situación basada en excepciones. Espero que ayude a otros:

     //Adding the active class to Twitter bootstrap navs, with a few alternate approaches $(document).ready(function() { var rawhref = window.location.href; //raw current url var newpage = ((window.location.href.match(/([^\/]*)\/?$/)[1]).substring(1)); //take only the last part of the url, and chop off the first char (substring), since the contains method below is case-sensitive. Don't need to do this if they match exactly. if (newpage == 'someNonMatchingURL') { //deal with an exception literally newpage = 'matchingNavbarText' } if (rawhref.indexOf('somePartofURL') != -1) { //look for a consistent part of the path in the raw url to deal with variable urls, etc. newpage = "moreMatchingNavbarText" } $(".nav li a:contains('" + newpage + "')").parent().addClass('active'); //add the active class. Note that the contains method requires the goofy quote syntax to insert a variable. }); 

    Para activar los menús y submenús, incluso con params en la URL, use el siguiente código:

     // Highlight the active menu $(document).ready(function () { var action = window.location.pathname.split('/')[1]; // If there's no action, highlight the first menu item if (action == "") { $('ul.nav li:first').addClass('active'); } else { // Highlight current menu $('ul.nav a[href="/' + action + '"]').parent().addClass('active'); // Highlight parent menu item $('ul.nav a[href="/' + action + '"]').parents('li').addClass('active'); } }); 

    Esto acepta URL como:

    / publicaciones
    / posts / 1
    / posts / 1 / edit

    Tuve el mismo problema, y ​​esto es lo que agregué en el script de inicio de mi aplicación, y funcionó sin problemas. Aquí está el javascript

     $(document).ready(function($){ var navs = $('nav > ul.nav'); // Add class .active to current link navs.find('a').each(function(){ var cUrl = String(window.location).split('?')[0]; if (cUrl.substr(cUrl.length - 1) === '#') { cUrl = cUrl.slice(0,-1); } if ($($(this))[0].href===cUrl) { $(this).addClass('active'); $(this).parents('ul').add(this).each(function(){ $(this).parent().addClass('open'); }); } }); }); 

    Y el HTML correspondiente se muestra a continuación. Estoy usando CoreUI , una fenomenal plantilla de administrador de código abierto y tengo soporte para muchos frameworks frontales como Angular, bootstrap simple, Angular 4, etc.

      
     $(function() { // Highlight the active nav link. var url = window.location.pathname; var filename = url.substr(url.lastIndexOf('/') + 1); $('.navbar a[href$="' + filename + '"]').parent().addClass("active"); 

    });

    Para más detalles haga clic aquí!