Mantener activa la pestaña actual al recargar la página en Bootstrap
Más de 2 años
0
0
207
En Bootstrap, si actualiza la página, la pestaña se restablece a la configuración predeterminada. Sin embargo, puede usar el objeto HTML5 localStorage para guardar algún parámetro para la pestaña actual localmente en el navegador y recuperarlo para recargar la última pestaña activa seleccionada en la página.
Probemos el siguiente ejemplo para comprender cómo funciona básicamente:
Probemos el siguiente ejemplo para comprender cómo funciona básicamente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Keep Last Selected Bootstrap Tab Active on Page Refresh</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
});
</script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a href="#sectionA" class="nav-link active" data-toggle="tab">Section A</a>
</li>
<li class="nav-item">
<a href="#sectionB" class="nav-link" data-toggle="tab">Section B</a>
</li>
<li class="nav-item">
<a href="#sectionC" class="nav-link" data-toggle="tab">Section C</a>
</li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade show active">
<h3>Section A</h3>
<p>AAAAA</p>
</div>
<div id="sectionB" class="tab-pane fade">
<h3>Section B</h3>
<p>BBBBB</p>
</div>
<div id="sectionC" class="tab-pane fade">
<h3>Section C</h3>
<p>CCCCC</p>
</div>
</div>
</div>
</body>
</html>
0 comentarios
Tienes que ser miembro para responder en este tema
Portada
Últimos comentarios
