Bootstrap navbar Estado activo no funciona
Tengo bootstrap v3.
Uso el class="active" en minavbar y no cambia cuando presiono los elementos del menú. Sé cómo hacer esto con jQuery y construir una función de clic, pero estoy pensando que esta funcionalidad debe incluirse en bootstrap? Así que tal vez es un problema de JavaScript?
Aquí está mi encabezado con mis archivos js/css / bootstrap que he incluido:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href= "/stylesheets/styles.css" />
<!--jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!-- Bootstrap JS -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/bootstrap-collapse.js"></script>
<script src="/bootstrap/js/bootstrap-transition.js"></script>
Aquí está mi navbar código:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/index.php">MyBrand</a>
</div>
<div class="collapse navbar-collapse navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="/index.php">Home</a>
</li>
<li>
<a href="/index2.php"> Links</a>
</li>
<li>
<a href="/history.php">About</a>
</li>
<li>
<a href="/contact.php">Contact</a>
</li>
<li>
<a href="/login.php">Login</a>
</li>
</ul>
</div>
</div>
</nav>
¿Estoy configurando esto correctamente?
(En una nota no relacionada, pero posible ¿emparentados? Cuando el menú se vuelve móvil, hago clic en el botón de menú y se colapsa. Sin embargo, empujarlo de nuevo no lo deshace. Así que este tema,. con el otro, ambos significan una configuración incorrecta de JavaScript tal vez?)
18 answers
Ha incluido el archivo js de Bootstrap minificado y los complementos de colapso/transición mientras que los documentos indican que:
Ambos bootstrap.js y bootstrap.min.js contiene todos los plugins en un solo archivo.
Incluye solo uno.
Y
Para efectos de transición simples, incluya transición.js once alongside los otros archivos JS. Si está utilizando el compilado (o minificado) arranque.js, no hay necesidad de incluir esto-ya está allí.
So eso bien podría ser su problema para el problema mínimo.
Para la clase activa, tienes que administrarla tú mismo, pero es solo una línea o dos.
Bootstrap 3:
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
Bootply: http://www.bootply.com/IsRfOyf0f9
Bootstrap 4:
$(".nav .nav-link").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).addClass("active");
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-09 08:44:28
Aquí estaba mi solución para cambiar páginas activas
$(document).ready(function() {
$('li.active').removeClass('active');
$('a[href="' + location.pathname + '"]').closest('li').addClass('active');
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-08 14:18:55
Con la versión 3.3.4 de bootstrap, en páginas html largas se puede hacer referencia a secciones de la pg. por clase o id para administrar el enlace activo de la barra de navegación con spy-scroll con el elemento body:
<body data-spy="scroll" data-target="spy-scroll-id">
El objetivo de datos será un div con el id = "spy-scroll-id"
<div id="spy-scroll-id" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#topContainer">Home</a></li>
<li><a href="#details">About</a></li>
<li><a href="#carousel-container">SlideShow</a></li>
</ul>
</div>
Esto debería activar los enlaces haciendo clic sin ninguna función de javascript necesaria y también activará automáticamente cada enlace a medida que se desplaza por las secciones vinculadas correspondientes de la página que un js onclick() ni.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-04 06:44:33
Esto funciona perfectamente para mí, causa " ventana.ubicación.pathname " también contiene datos antes del nombre real de la página, por ejemplo, directory / page.php. La barra de exploración de enlace sólo se activa si la url contiene este enlace.
$(document).ready(function() {
// -----------------------------------------------------------------------
$.each($('#navbar').find('li'), function() {
$(this).toggleClass('active',
window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
});
// -----------------------------------------------------------------------
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-11 10:02:43
Si no usas enlaces de anclaje, puedes usar algo como esto:
$(document).ready(function () {
$.each($('#navbar').find('li'), function() {
$(this).toggleClass('active',
'/' + $(this).find('a').attr('href') == window.location.pathname);
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-20 21:46:18
Todo lo que necesita hacer es simplemente agregar data-toggle = "tab" a su enlace dentro de la barra de navegación de bootstrap de la siguiente manera:
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#">Home</a></li>
<li><a data-toggle="tab" href="#">Test</a></li>
<li><a data-toggle="tab" href="#">Test2</a></li>
</ul>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-26 09:58:34
Esta solución elegante hizo el truco para mí. Cualquier nueva idea/sugerencia es bienvenida.
$( document ).on( 'click', '.nav-list li', function ( e ) {
$( this ).addClass( 'active' ).siblings().removeClass( 'active' );
} );
Puede usar el método "hermanos()" de jQuery para mantener activo solo el elemento al que se accede y sus hermanos inactivos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-03 07:21:55
Con Bootstrap 4 puedes usar esto:
$(document).ready(function() {
$(document).on('click', '.nav-item a', function (e) {
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-27 18:39:03
He estado luchando con esto hoy, data-togle solo funcionó si estoy en una aplicación de una sola página.
No estoy usando ajax para cargar el contenido que en realidad estoy haciendo post request para otras páginas, por lo que el primer script js también fue inútil. Lo resuelvo con estas líneas:
var active = window.location.pathname;
$(".nav a[href|='" + active + "']").parent().addClass("active");
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-27 22:32:28
Espero que esto ayude a resolver este problema.
var navlnks = document.querySelectorAll(".nav a");
Array.prototype.map.call(navlnks, function(item) {
item.addEventListener("click", function(e) {
var navlnks = document.querySelectorAll(".nav a");
Array.prototype.map.call(navlnks, function(item) {
if (item.parentNode.className == "active" || item.parentNode.className == "active open" ) {
item.parentNode.className = "";
}
});
e.currentTarget.parentNode.className = "active";
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-02 15:41:43
Tuve algo de dolor con esto, utilizando una lista de elementos generados dinámicamente - Pila de WordPress.
Agregó esto y funcionó:
$(document).ready(function () {
$(".current-menu-item").addClass("active");
});
Lo hará sobre la marcha.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-06 09:55:20
La clase "active" no se administra fuera de la caja con bootstrap. En tu caso ya que estás usando PHP puedes ver:
Cómo agregar class = 'active' al menú html con php
Para ayudarle con un método de principalmente automatizarlo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:47:25
Para bootstrap mobile menú un-collapse después de hacer clic en un elemento se puede utilizar este
$("ul.nav.navbar-nav li a").click(function() {
$(".navbar-collapse").removeClass("in");
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-05 21:04:19
Estoy usando bootstrap bare theme, aquí está el código de la barra de navegación de ejemplo. Observe el nombre de clase del elemento - > .nav - como esto se refiere en java script.
/ Collect the nav links, forms, and other content for toggling
#bs-example-navbar-collapse-1.collapse.navbar-collapse
%ul.nav.navbar-nav
%li
%a{:href => "/demo/one"} Page One
%li
%a{:href => "/demo/two"} Page Two
%li
%a{:href => "/demo/three"} Page Three
En la página de vista (o parcial) agregue esto: javascript, esto debe ejecutarse cada vez que se cargue la página.
Fragmento de vista Haml- >
- content_for :javascript do
:javascript
$(function () {
$.each($('.nav').find('li'), function() {
$(this).toggleClass('active',
$(this).find('a').attr('href') == window.location.pathname);
});
});
En el depurador de javascript, asegúrese de que el valor del atributo 'href' coincide con window.ubicación.pathname. Esto es ligeramente diferente de la solución @Zitrax que me ayudó a solucionar mi problema.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-02 22:33:44
Para AngularJS, puede utilizar ng-class con una función como esta:
HTML - >
<nav class="navbar navbar-default" ng-controller="NavCtrl as vm">
<div class="container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li ng-class="vm.Helper.UpdateTabActive('Home')"><a href="#" ng-click>Home</a></li>
<li ng-class="vm.Helper.UpdateTabActive('About')"><a href="#about">About</a></li>
<li ng-class="vm.Helper.UpdateTabActive('Contact')"><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
Y controlador
app.controller('NavCtrl', ['$scope', function($scope) {
var vm = this;
vm.Helper = {
UpdateTabActive: function(sTab){
return window.location.hash && window.location.hash.toLowerCase() == ("#/" + sTab).toLowerCase() ? 'active' : '';
}
}
}]);
Si está utilizando location location, entonces no habrá hash. Así que puedes extraer la cadena requerida de la URL usando location location
Siguiente no funcionará en todos los casos -->
El uso de una variable de ámbito como la siguiente funcionará solo cuando se haga clic, pero si la transición se realiza utilizando $state.transitionTo o window.ubicación o manualmente al actualizar la URL, el valor de la pestaña no se actualizará
<ul class="nav navbar-nav" ng-init="Tab='Home'">
<li ng-class="Tab == 'Home' ? 'active' : ''"><a href="#" ng-click="Tab = 'Home'">Home</a></li>
<li ng-class="Tab == 'About' ? 'active' : ''"><a href="#" ng-click="Tab = 'About'">About</a></li>
</ul>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-12 15:40:32
Agregue este JavaScript en su archivo js principal.
$(".navbar a").on("click", function(){
$(".navbar").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-05 12:56:17
Tuve que dar un paso adelante porque mis nombres de archivo no eran los mismos que mis títulos de la barra de navegación. es decir, mi primer enlace de la barra de navegación estaba en CASA, pero el nombre del archivo es index..
Así que simplemente toma el nombre de ruta y haz que coincida.
Obviamente este es un ejemplo crudo y podría ser más eficiente, pero es una necesidad altamente personalizada.
var loc_path = location.pathname;
$('li.active').removeClass('active');
if(loc_path.includes('index')){
$('li :eq(0)').addClass('active');
}else if(loc_path.includes('blog')){
$('li :eq(2)').addClass('active');
}else if(loc_path.includes('news')){
$('li :eq(3)').addClass('active');
}else if(loc_path.includes('house')){
$('li :eq(4)').addClass('active');
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-21 04:18:44
Bootstrap 4 solución que funcionó para mí:
$(document).ready(function() {
//You can name this function anything you like
function activePage(){
//When user lands on your website location.pathname is equal to "/" and in
//that case it will add "active" class to all links
//Therefore we are going to remove first character "/" from the pathname
var currentPage = location.pathname;
var slicedCurrentPage = currentPage.slice(1);
//This will add active class to link for current page
$('.nav-link').removeClass('active');
$('a[href*="' + location.pathname + '"]').closest('li').addClass('active');
//This will add active class to link for index page when user lands on your website
if (location.pathname == "/") {
$('a[href*="index"]').closest('li').addClass('active');
}
}
//Invoke function
activePage();
});
Esto sólo funcionará si href contiene ubicación.pathname !
Si está probando su sitio en su propio pc (usando wamp, xampp, lamp, etc...) y su sitio se encuentra en alguna subcarpeta, entonces su ruta es en realidad " / somefolder / something.php", así que no te confundas.
Sugeriría si no está seguro de usar el siguiente código para que pueda asegurarse de cuál es el correcto ubicación.pathname :
$(document).ready(function() {
alert(location.pathname);
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-15 03:19:43