Return to the first tab when closing modal

Question

I have a modal with tabs and I would like that whenever reopen my window the tab goes back to first, currently whenever I close the window the tab that appears is the last that activated.

Follows my code:

$(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">&times;</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>

Answer 1

You can use the Bootstrap event Hidden.bs.modal for when the modal is closed, set the class active for tab 1 with the method eq:() jQuery:

$(function() {
  $(".btn-lg").click(function() {
    const id_codigo = 1;    
    $.each($(".modal-body #id_td1"), (index, item) => {    
        $(item).text(id_codigo);
    });
  });
  
  $('#myModal').on('hidden.bs.modal', function() {
    $('li').removeClass('active');
    $('li:eq(0)').addClass('active');
  })
});

<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">&times;</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>