Mantener activa la pesta?a actual al recargar la p?gina en Bootstrap
Más de 3 años
0
0
379
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>
Tienes que ser miembro para responder en este tema
Últimos comentarios
