javascript - data - popovers bootstrap 4

Cómo configurar la clase activa en el menú de navegación desde Twitter Bootstrap

Question

Soy nuevo en el bootstrap de Twitter . Utilizando los menús de navegación . Estoy tratando de establecer la clase activa en el menú seleccionado. mi menú es -

<div class="nav-collapse">
<ul class="nav">
<li id="home" class="active"><a href="~/Home/Index">Home</a></li>
<li><a href="#">Project</a></li>
<li><a href="#">Customer</a></li>
<li><a href="#">Staff</a></li>
<li id="broker"><a href="~/Home/Broker">Broker</a></li>
<li><a href="#">Sale</a></li>
</ul>
</div>

Intenté lo siguiente después de buscar en Google que tengo que configurar la clase activa en cada página desde el menú como ...

<script>
$(document).ready(function () {
$(''#home'').addClass(''active'');
});
</script>

pero el problema de arriba es que configuro el menú de inicio seleccionado por defecto. Entonces siempre se selecciona. Hay alguna otra manera de hacer esto ? , o que puedo generalizar y mantener mi js en el archivo de diseño en sí?

Después de ejecutar la aplicación mi menú se ve -

Después de hacer clic en otro elemento del menú obtengo el siguiente resultado

Y agregué los siguientes scripts en la vista de índice y en la vista de intermediario ---

<script>
$(document).ready(function () {
$(''#home'').addClass(''active'');
});
</script>
<script>
$(document).ready(function () {
$(''#broker'').addClass(''active'');
});
</script>

respectivamente.

Answer 1

Acabo de agregar una clase personalizada a la sección ul llamada target-active

<ul class="nav navbar-nav target-active">
<li><a href="/">HOME</a></li>
<li><a href="find-truck">FIND A TRUCK</a></li>
<li><a href="our-service">OUR SERVICES</a></li>
<li><a href="about-us">ABOUT US</a></li>
</ul>

Si cada etiqueta li hace clic en obtener una nueva página desde un lugar diferente o en el mismo lugar, no es necesario agregar la función jquery removeClass.

Agregue un código simple de jQuery de una línea a cada página para obtener el resultado deseado

1ra página de enlace

$(function(){
$(".target-active").find("[href=''/'']").parent().addClass("active");
});

2da pagina de enlace

$(function(){
$(".target-active").find("[href=find-truck]").parent().addClass("active");
});

Tercera página de enlace

$(function(){
$(".target-active").find("[href=our-service]").parent().addClass("active");
});

Cuarta página de enlace

$(function(){
$(".target-active").find("[href=about-us]").parent().addClass("active");
});

Answer 2

Estoy usando Flask Bootstrap. Mi solución es un poco más simple porque mi plantilla ya recibe la opción o la opción como parámetro de Flask.

var choice = document.getElementById("{{ item_kind }}");
choice.className += "active";

Primera línea, código js obtiene el elemento. Por lo tanto, debe identificar cada uno de los elementos con un id. Voy a mostrar un ejemplo a continuación. Segunda línea, agregas la clase activa. Puedes ver los ID de html a continuación.

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a id="speed" href="{{ url_for(''list_gold_per_item'',item_kind=''speed'',level=''2'') }}">
<h2>Speed</h2>
</a>
</li>
<li>
<a id="life" href="{{ url_for(''list_gold_per_item'',item_kind=''life'',level=''3'') }}">
<h2>Life</h2>
</a>
</li>
</ul>
</div>

Answer 3

Para los sitios de una sola página donde los elementos del menú simplemente saltan a otras secciones de la página, esta solución simple funciona para mí:

$(''.nav li'').on(''click'', function(){
$(''.nav li'').removeClass(''active'');
$(this).addClass(''active'');
});

Answer 4

Para los sitios de una sola página, lo siguiente es lo que he usado. No solo establece el elemento activo en función de lo que se ha hecho clic, sino que también busca un valor de hash en la ubicación de la URL en la carga de la página inicial.

$(document).ready(function () {
var removeActive = function() {
$( "nav a" ).parents( "li, ul" ).removeClass("active");
};
$( ".nav li" ).click(function() {
removeActive();
$(this).addClass( "active" );
});
removeActive();
$( "a[href=''" + location.hash + "'']" ).parent( "li" ).addClass( "active" );
});

Answer 5

Podría agregar una clase diferente a la etiqueta BODY en cada página; por ejemplo, en la página de inicio podría tener esto:

<body class="nav-1-on">

Entonces este css:

.nav-1-on .nav-1 a, .nav-2-on .nav-2 a, .nav-3-on .nav-3 a, .nav-4-on .nav-4 a {
// set your styles here
}

El elemento NAV:

<ul> <li class="nav-1"><a href="#">Home</a></li> <li class="nav-2"><a href="#">Services</a></li> <li class="nav-3"><a href="#">About</a></li> <li class="nav-4"><a href="#">Contact</a></li> </ul> #

Alternativamente, puede colocar una clase en el CUERPO en cada página y luego tomarla a través de jQuery y agregar la clase .active al elemento de navegación correcto en función de esa etiqueta.

Answer 6

Puedes usar este JavaScript/jQuery :

// Sets active link in Bootstrap menu
// Add this code in a central place used/shared by all pages
// like your _Layout.cshtml in ASP.NET MVC for example
$(''a[href="'' + this.location.pathname + ''"]'').parents(''li,ul'').addClass(''active'');

Establecerá el <li> padre <li> y el <li> padre <ul> como activo.

Una solución simple que funciona!

Fuente original:

Bootstrap agregar clase activa a li

Answer 7

Tuve el mismo problema ... lo resolví agregando el código que se muestra a continuación al archivo Into "$ (document) .ready" part of my "functions.js" que se incluye en cada pie de página. Es bastante simple Obtiene la URL actual completa de la página mostrada y la compara con la URL href de ancla completa. Si son iguales, establezca ancla (li) padre como activo. Y haga esto solo si el valor href del ancla no es "#", entonces el bootstrap lo resolverá.

$(document).ready(function () {
$(function(){
var current_page_URL = location.href;
$( "a" ).each(function() {
if ($(this).attr("href") !== "#") {
var target_URL = $(this).prop("href");
if (target_URL == current_page_URL) {
$(''nav a'').parents(''li, ul'').removeClass(''active'');
$(this).parent(''li'').addClass(''active'');
return false;
}
}
}); }); });

Answer 8

es una solución. tratar

<div class="nav-collapse">
<ul class="nav">
<li id="home" class="active"><a href="~/Home/Index">Home</a></li>
<li><a href="#">Project</a></li>
<li><a href="#">Customer</a></li>
<li><a href="#">Staff</a></li>
<li id="demo"><a href="~/Home/demo">Broker</a></li>
<li id=''sale''><a href="#">Sale</a></li>
</ul>
</div>

y en cada página js agregar

$(document).ready(function () {
$(".nav li").removeClass("active");//this will remove the active class from
//previously active menu item
$(''#home'').addClass(''active'');
//for demo
//$(''#demo'').addClass(''active'');
//for sale
//$(''#sale'').addClass(''active'');
});

Answer 9

$( ".nav li" ).click(function() {
$(''.nav li'').removeClass(''active'');
$(this).addClass(''active'');
});

mira esto.

Answer 10

(function (window) {
bs3Utils = {}
bs3Utils.nav = {
activeTab: function (tabId) {
/// <summary>
/// 设置需要展现的tab
/// </summary>
/// <param name="tabId"></param>
$(''.nav-tabs a[href="#'' + tabId + ''"]'').tab(''show'');
}
}
window.bs3Utils = bs3Utils;
})(window);

ejemplo:

var _actvieTab = _type == ''0'' ? ''portlet_tab2_1'' : ''portlet_tab2_2'';
bs3Utils.nav.activeTab(_actvieTab);
<ul class="nav nav-tabs">
<li class="active">
<a href="#portlet_tab2_1" data-toggle="tab">箱-单灯节点 </a>
</li>
<li>
<a href="#portlet_tab2_2" data-toggle="tab">箱-灯组节点 </a>
</li>
</ul>

Answer 11

<div class="nav-collapse">
<ul class="nav">
<li class="home"><a href="~/Home/Index">Home</a></li>
<li class="Project"><a href="#">Project</a></li>
<li class="Customer"><a href="#">Customer</a></li>
<li class="Staff"><a href="#">Staff</a></li>
<li class="Broker"><a href="~/Home/Broker">Broker</a></li>
<li class="Sale"><a href="#">Sale</a></li>
</ul>
</div>

Luego para cada página agregas esto:

//casa

 $(document).ready(function () {
$(''.home'').addClass(''active'');
});

// página del proyecto

$(document).ready(function () {
$(''.Project'').addClass(''active'');
});

// página del cliente

 $(document).ready(function () {
$(''.Customer'').addClass(''active'');
});

// página del personal

 $(document).ready(function () {
$(''.Staff'').addClass(''active'');
});

Answer 12

<div class="nav-collapse">
<ul class="nav">
<li class="home"><a href="~/Home/Index">Home</a></li>
<li class="Project"><a href="#">Project</a></li>
<li class="Customer"><a href="#">Customer</a></li>
<li class="Staff"><a href="#">Staff</a></li>
<li class="Broker"><a href="~/Home/Broker">Broker</a></li>
<li class="Sale"><a href="#">Sale</a></li>
</ul>
</div>
$(''ul.nav>li.home>a'').click(); // first. same to all the other options changing the li class name