Tenho um modal com tabs e gostaria que sempre que reabrir minha janela a aba volte para primeira, atualmente sempre que fecho a janela a aba que aparece é a última que ativei.
Segue meu código:
$(function() {
$(".btn-lg").click(function() {
const id_codigo = 1;
$.each($(".modal-body #id_td1"), (index, item) => {
$(item).text(id_codigo);
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs nav-justified" style='margin-top: 0px;'>
<li role="presentation" class="active"><a href="#t1" aria-controls="t1" role="tab" data-toggle="tab">Conteúdo</a></li>
<li role="presentation"><a href="#t2" aria-controls="t2" role="tab" data-toggle="tab">Avaliação</a></li>
<li role="presentation"><a href="#t3" aria-controls="t3" role="tab" data-toggle="tab">Avaliação</a></li>
<li role="presentation"><a href="#t4" aria-controls="t4" role="tab" data-toggle="tab">Avaliação</a></li>
<li role="presentation"><a href="#t5" aria-controls="t5" role="tab" data-toggle="tab">Avaliação</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="t1">
<div class='container-fluid'>
<div class='table-wrapper'>
<div class='table-title'>
</div>
<table class="table table-responsive" border="0">
<tr>
<th>Código:</th>
<td id="id_td1"></td>
</tr>
</table>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="t2">
<div class='container-fluid'>
<div class='table-wrapper'>
<div class='table-title'>
</div>
<table class="table table-responsive" border="0">
<tr>
<th>Código:</th>
<td id="id_td1"></td>
</tr>
</table>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane active" id="t3">
<div class='container-fluid'>
<div class='table-wrapper'>
<div class='table-title'>
</div>
<table class="table table-responsive" border="0">
<tr>
<th>Código:</th>
<td id="id_td1"></td>
</tr>
</table>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane active" id="t4">
<div class='container-fluid'>
<div class='table-wrapper'>
<div class='table-title'>
</div>
<table class="table table-responsive" border="0">
<tr>
<th>Código:</th>
<td id="id_td1"></td>
</tr>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>