jquery adminlte - Twitter Bootstrap agrega clase activa a li




active menu (13)

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:

<ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/forums">Forums</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/faqs.php">FAQ's</a></li>
    <li><a href="/item.php">Item</a></li>
    <li><a href="/create.php">Create</a></li>
</ul>

El código de Bootstrap es el siguiente:

<li class="active"><a href="/">Home</a></li>

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.


Answers

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
    };
});
<ul class="nav nav-sidebar">
    <li><a href="#/page1" my-data-toggle>Page1</a></li>
    <li><a href="#/page2" my-data-toggle>Page2</a></li>
    <li><a href="#/page3" my-data-toggle>Page3</a></li>
</ul>

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:

page1.html

<body id="page1">
    <ul class="nav navbar-nav">
        <li><a href="page1.html">Page1</a></li>
        <li><a href="page2.html">Page2</a></li>
    </ul>
    <script src="script.js"></script>
</body>

page2.html

<body id="page2">
    <ul class="nav navbar-nav">
        <li><a href="page1.html">Page1</a></li>
        <li><a href="page2.html">Page2</a></li>
    </ul>
    <script src="script.js"></script>
</body>

script.js

<script>
    $(function () {
        $("#page1 a:contains('Page1')").parent().addClass('active');
        $("#page2 a:contains('Page2')").parent().addClass('active');
     });
</script>

¡Muchas gracias a Ben! YouTube


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.

<div class="sidebar">
<nav class="sidebar-nav open" >
    <ul class="nav" id="navTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link"    href="/summary"><i class="icon-speedometer"></i> Dashboard </a>
        </li>
        <li class="nav-item">
            <a class="nav-link"    href="/balanceSheet"><i class="icon-chart"></i> Balance Sheet </a>
        </li>
        <li class="divider"></li>
        <li class="nav-title border-bottom">
            <p class="h5 mb-0">
                <i class="icon-graph"></i> Assets
            </p>
        </li>
     </ul>
  </nav>
</div>

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.

});


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


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

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

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://.com/a/13375529/101662


$(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í!


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:

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">
        <li class="active">
          <a href="#?page=0">
            Home
          </a>
        </li>
        <li>
          <a href="#?page=1">
            Forums
          </a>
        </li>
        <li>
          <a href="#?page=2">
            Blog
          </a>
        </li>
        <li>
          <a href="#?page=3">
            FAQ's
          </a>
        </li>
        <li>
          <a href="#?page=4">
            Item
          </a>
        </li>
        <li>
          <a href="#?page=5">
            Create
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

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 http://codebins.com/bin/4ldqpaf clic aquí http://codebins.com/bin/4ldqpaf


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

Si desea agregar una row antes del <tr> primer hijo.

$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");

Si desea agregar una row después del último <tr> hijo.

$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");




jquery menu twitter-bootstrap