Setar tab bootstrap when clicking the link (Django)

Question

Good afternoon!

I need help with bootstrap Nav tab.

I have three tabs (pending; tempo; finalizado), where each of them has a grid with a button that opens a form on the same page using the same view. The problem is that if I click the progress tab button, it opens the form the pending tab is activated.

I need that even by reloading the page I can somehow inform which tab I want to be active.

Excerpt from the html button to open the form (with onclick event in an attempt to stay in the same tab by clicking):

<a href="{% url 'testes:realiza-teste' item.id %}" onclick="$('#nav-andamento-tab').trigger('click')"> <img src="{% static 'testes/images/img-test.png' %}" width=26 ></a>
         

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--ABAS -->
<div class="container-fluid ">
  <div class="card">
    <div class="card-body ">

      
      <ul class="nav nav-tabs" id="nav-tab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="nav-pendentes-tab" data-toggle="tab" href="#nav-pendentes" role="tab">Testes Pendentes</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " id="nav-andamento-tab" data-toggle="tab" href="#nav-andamento" role="tab">Testes Em andamento</a>
        </li>   
        <li class="nav-item">
        <a class="nav-link " id="nav-finalizados-tab" data-toggle="tab" href="#nav-finalizados" role="tab">Testes Finalizados</a>
        </li>
      </ul>
     

      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade active show" id="nav-pendentes" role="tabpanel" aria-labelledby="nav-pendentes-tab">

          <br>
          {% if item == "" %}

          <div class="row">
            <div class="col-xs-4 col-sm-12 col-md-12 col-lg-12  mb-3">
              <div class="card">
                <div class="card-body">
                  <div style="overflow: auto; height: 300px">
                    <table class="table small-table table-hovers"
                      aria-describedby="dynamic-table_info">
                      <thead >
                        <tr class="text-center">
                          <th></th>
                          <th>Placa</th>
                          <th>Requisicao</th>
                          <th>Etapa de Teste</th>
                          <th>Status de Teste</th>
                          <th>Descrição</th>
                        </tr>
                      </thead>

                      <tbody>
                        {% for item in pendente %}
                        <tr class="text-center">
                          <td> <a href=" {% url 'testes:realiza-teste' item.id %}"> <img src="{% static 'testes/images/img-test.png' %}" width=26 ></a></td>
                          <td>{{ item.Numero_serie }}</td>
                          <td>{{ item.Requisicao }}</td>
                          <td>{{ item.Etapa_teste }}</td>
                          <td>{{ item.Status_teste }}</td>
                          <td>{{ item.Descricao }}</td>
                        </tr>
                        {% endfor %}
                      </tbody>

                    </table>
                  </div> <!-- table lista -->
                </div> <!--card-body lista -->
              </div> <!--card lista -->
            </div> <!--col lista-->
          </div>

          {% else %} 

         <div class="row">
            <div class="col-xs-4 col-sm-12 col-md-8 col-lg-8  mb-3">
              <div class="card">
                <div class="card-body">
                  <div style="overflow: auto; height: 300px">
                    <table class="table small-table table-hovers"
                      aria-describedby="dynamic-table_info">
                      <thead >
                        <tr class="text-center">
                          <th></th>
                          <th>Placa</th>
                          <th>Requisicao</th>
                          <th>Descrição</th>
                        </tr>
                      </thead>

                      <tbody>
                        {% for item in pendente %}
                        <tr class="text-center">
                          <td> <a href=" {% url 'testes:realiza-teste' item.id %}"> <img src="{% static 'testes/images/img-test.png' %}" width=26 ></a></td>
                          <td>{{ item.Numero_serie }}</td>
                          <td>{{ item.Requisicao }}</td>
                          <td>{{ item.Descricao }}</td>
                        </tr>
                        {% endfor %}
                      </tbody>

                    </table>
                  </div> <!-- table lista -->
                </div> <!--card-body lista -->
              </div> <!--card lista -->
            </div> <!--col lista-->
            

            
            <!--Formulario de teste-->
            <div class="col-xs-2 col-sm-12 col-md-4 col-lg-4  mb-3">
              <div class="card">
                <div class="card-body">
                  <div class="card-title">
                    <a type="button" class="close text-danger" href="{% url 'testes:lista-itens-teste'  %}">
                      x
                    </a>
                    <div class="row ">
                      <h6 class="card-title mb-2 ">{{ item.Numero_serie}} </h6><br>
                    </div>                    
                  </div>
                  
                  <hr/>
                  <form method="POST" class="post-form ">
                    {% csrf_token %}
                    {{ formset.management_form|crispy }}
                    <div class="card col-md-12 mb-4">
                        <div class="form-row">
                            <div class="form-group col-md-12 mb-0">
                                {{ form.Etapa_teste | as_crispy_field}}
                            </div>                            
                        </div> 
                        <div class="form-row">                                                    
                            <div class="form-group col-md-12 mb-0">
                                {{ form.Status | as_crispy_field}}
                            </div>
                        </div>
                        <div class="form-row">                                                    
                            <div class="form-group col-md-12 mb-0">
                                {{ form.Situacao | as_crispy_field}}
                            </div>
                        </div>
                        <div class="form-row">                                                    
                          <div class="form-group col-md-12 mb-0">
                            {{ form.Observacao | as_crispy_field}}
                          </div>
                        </div> 
                    </div>
                                
                    <div class="card text-center">
                        <div class="card-body">
                            <button type="submit" class="save btn btn-outline-primary col-md-8 mb-2">Salvar</button>
                        </div>
                    </div>                            
                  </form>                
                </div> <!--card body form-->
              </div> <!--card form--> 
            </div><!--col form-->
          </div> <!--row-->

       
          {% endif %}          
        </div> <!--fim aba pendente-->



        <!--aba em andamento-->
        <div class="tab-pane fade" id="nav-andamento" role="tabpanel" aria-labelledby="nav-andamento-tab">
          <br>
          {% if item == "" %}

          <div class="row">
            <div class="col-xs-4 col-sm-12 col-md-12 col-lg-12  mb-3">
              <div class="card">
                <div class="card-body">
                  <div style="overflow: auto; height: 300px">
                    <table class="table small-table table-hovers"
                      aria-describedby="dynamic-table_info">
                      <thead >
                        <tr class="text-center">
                          <th></th>
                          <th>Placa</th>
                          <th>Requisicao</th>
                          <th>Etapa de Teste</th>
                          <th>Status de Teste</th>
                          <th>Descrição</th>
                        </tr>
                      </thead>

                      <tbody>
                        {% for item in andamento %}
                        <tr class="text-center">
                          <td> <a href="{% url 'testes:realiza-teste' item.id %}" onclick="$('#nav-andamento-tab').trigger('click')"> <img src="{% static 'testes/images/img-test.png' %}" width=26 ></a></td>
                          <td>{{ item.Numero_serie }}</td>
                          <td>{{ item.Requisicao }}</td>
                          <td>{{ item.Etapa_teste }}</td>
                          <td>{{ item.Status_teste }}</td>
                          <td>{{ item.Descricao }}</td>
                        </tr>
                        {% endfor %}
                      </tbody>

                    </table>
                  </div> <!-- table lista -->
                </div> <!--card-body lista -->
              </div> <!--card lista -->
            </div> <!--col lista-->
          </div>

          {% else %} 

         <div class="row">
            <div class="col-xs-4 col-sm-12 col-md-8 col-lg-8  mb-3">
              <div class="card">
                <div class="card-body">
                  <div style="overflow: auto; height: 300px">
                    <table class="table small-table table-hovers"
                      aria-describedby="dynamic-table_info">
                      <thead >
                        <tr class="text-center">
                          <th></th>
                          <th>Placa</th>
                          <th>Requisicao</th>
                          <th>Descrição</th>
                        </tr>
                      </thead>

                      <tbody>
                        {% for item in andamento %}
                        <tr class="text-center">
                          <td> <a href=" {% url 'testes:realiza-teste' item.id %}"> <img src="{% static 'testes/images/img-test.png' %}" width=26 ></a></td>
                          <td>{{ item.Numero_serie }}</td>
                          <td>{{ item.Requisicao }}</td>
                          <td>{{ item.Descricao }}</td>
                        </tr>
                        {% endfor %}
                      </tbody>

                    </table>
                  </div> <!-- table lista -->
                </div> <!--card-body lista -->
              </div> <!--card lista -->
            </div> <!--col lista-->
            

            
            <!--Formulario de teste-->
            <div class="col-xs-2 col-sm-12 col-md-4 col-lg-4  mb-3">
              <div class="card">
                <div class="card-body">
                  <div class="card-title">
                    <a type="button" class="close text-danger" href="{% url 'testes:lista-itens-teste' %}" onclick="abreAndamento()" >
                      x
                    </a>
                    <div class="row ">
                      <h6 class="card-title mb-2 ">{{ item.Numero_serie}} </h6><br>
                    </div>                    
                  </div>
                  
                  <hr/>
                  <form method="POST" class="post-form ">
                    {% csrf_token %}
                    {{ formset.management_form|crispy }}
                    <div class="card col-md-12 mb-4">
                        <div class="form-row">
                            <div class="form-group col-md-12 mb-0">
                                {{ form.Etapa_teste | as_crispy_field}}
                            </div>                            
                        </div> 
                        <div class="form-row">                                                    
                            <div class="form-group col-md-12 mb-0">
                                {{ form.Status | as_crispy_field}}
                            </div>
                        </div>
                        <div class="form-row">                                                    
                            <div class="form-group col-md-12 mb-0">
                                {{ form.Situacao | as_crispy_field}}
                            </div>
                        </div>
                        <div class="form-row">                                                    
                          <div class="form-group col-md-12 mb-0">
                            {{ form.Observacao | as_crispy_field}}
                          </div>
                        </div> 
                    </div>
                                
                    <div class="card text-center">
                        <div class="card-body">
                            <button type="submit" class="save btn btn-outline-primary col-md-8 mb-2">Salvar</button>
                        </div>
                    </div>                            
                  </form>                
                </div> <!--card body form-->
              </div> <!--card form--> 
            </div><!--col form-->
          </div> <!--row-->
          {% endif %}
        </div> <!--fim aba em andamento-->

        <!--aba finalizados-->
        <div class="tab-pane fade" id="nav-finalizados" role="tabpanel" aria-labelledby="nav-finalizados-tab">
          <br>
          
          <div class="row">
            <div class="col-xs-4 col-sm-12 col-md-12 col-lg-12  mb-3">
              <div class="card">
                <div class="card-body">
                  <div style="overflow: auto; height: 300px">
                    <table class="table small-table table-hovers"
                      aria-describedby="dynamic-table_info">
                      <thead >
                        <tr class="text-center">
                          <th></th>
                          <th>Placa</th>
                          <th>Requisicao</th>
                          <th>Etapa de Teste</th>
                          <th>Status de Teste</th>
                          <th>Finalizado por</th>
                          <th>Descrição</th>
                        </tr>
                      </thead>

                      <tbody>
                        {% for item in finalizado %}
                        <tr class="text-center">
                          <td> <a href=" {% url 'testes:realiza-teste' item.id %}"> <img src="{% static 'testes/images/img-test.png' %}" width=26 ></a></td>
                          <td>{{ item.Numero_serie }}</td>
                          <td>{{ item.Requisicao }}</td>
                          <td>{{ item.Etapa_teste }}</td>
                          <td>{{ item.Status_teste }}</td>
                          <td> {{ item.username }}
                          <td>{{ item.Descricao }}</td>
                        </tr>
                        {% endfor %}
                      </tbody>

                    </table>
                  </div> <!-- table lista -->
                </div> <!--card-body lista -->
              </div> <!--card lista -->
            </div> <!--col lista-->
          </div> <!--row -->
        </div><!--Fim aba finalizados-->

      </div>
    </div> <!--Card-body-->
  </div> <!--Card-->
</div>
<!--FIM DA ABAS-->

Answer 1

What defines as the default tab in load is the class [class="Nav-link active"] on the line:

<a class="nav-link active" id="nav-pendentes-tab" data-toggle="tab" href="#nav-pendentes" role="tab">Testes Pendentes</a>

you will have to control the behavior with your onClick().