jquery - adminlte - bootstrap tags input

Twitter Bootstrap agrega clase activa a li

Question

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.

Answer 1

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

Answer 2

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>

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

Realmente no necesitas ningún JavaScript con Bootstrap:

 <ul class="nav">
<li><a data-target="#" data-toggle="pill" href="#accounts">Accounts</a></li>
<li><a data-target="#" data-toggle="pill" href="#users">Users</a></li>
</ul>

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.

Answer 12

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

Answer 13

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

Answer 14

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>

Answer 15

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