0

Tenho um input do tipo hidden que recebe o nome do menu que foi selecionado que foi retornando da aplicação, ele pode receber (andamentos, encerramento, valores) Após o retorno do post, quero que o menu que foi recebido no input fique ativo (class="tab-pane fade active" Tenho o meu formulário :

    <script>


                function AdicionarClasseMenuSelecionado(){
                    var menuatual = document.getElementById('MenuSelecionado').value;
                        alert(menuatual);

                        //remove todos os active
                        $("#aba1").removeClass("active");
                        $("#aba2").removeClass("active");
                        $("#aba3").removeClass("active");

                        //adiciona o active de acordo com o input
                        $("#andamentos").addClass("active in");
                        $("#aba2").addClass("active");
                    }



    </script>

      <div class="container">


                        <button type="button" onclick="AdicionarClasseMenuSelecionado()" class="btn btn-default">Teste</button>

                        <input name="MenuSelecionado" type="hidden"  value="andamentos" id="MenuSelecionado">


                        <form action="#" method="POST" class="form-horizontal" role="form">
                                <div class="form-group">
                                    <legend>Cadastro Teste</legend>
                                </div>

                        <ul class="nav nav-tabs">
                          <li class="active" id="aba1"><a data-toggle="tab"    href="#encerramento">Encerramento</a></li>
                          <li id="aba2"><a data-toggle="tab"  href="#andamentos">Andamentos</a></li>
                          <li id="aba3"><a data-toggle="tab"   href="#valores">Valores</a></li>
                        </ul>

                        <div class="tab-content">

                          <div id="encerramento" class="tab-pane fade active">
                            <h3>Encerramento</h3>
                            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                          </div>

                          <div id="andamentos" class="tab-pane fade ">
                            <h3>Andamentos</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                          </div>

                          <div id="valores" class="tab-pane fade ">
                            <h3>Valores</h3>
                            <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                          </div>

                        </div>

                        <div class="form-group">
                                <div class="col-sm-10 col-sm-offset-2">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                       </form>

                  </div>
11
  • Ele volta para a inicial pq após o envio do form a página recarrega, aí volta para a aba inicial.
    – LeAndrade
    Commented 18/07/2018 às 17:24
  • Pode postar o código para que possamos fazer testes e achar uma solução?
    – user60252
    Commented 18/07/2018 às 17:27
  • Pode depois de fazer post no formulário pode colocar a classe .active na aba que lhe interessa quanto está a construir a página do lado servidor. Commented 18/07/2018 às 18:30
  • @LeoCaracciolo, eu adicionei o codigo hmtl com um formulário, apos o post, quero manter a mesma aba aberta
    – Harry
    Commented 18/07/2018 às 18:40
  • @JorgeCosta, como eu posso retornar o formulário com a mesma aba aberta? agradeço
    – Harry
    Commented 18/07/2018 às 18:41

1 Resposta 1

0

Sua função ficará dinâmica desta forma:

function AdicionarClasseMenuSelecionado(){
   var menuatual = document.getElementById('MenuSelecionado').value;
   alert(menuatual);

   //remove todos os active
   $("ul.nav-tabs li").removeClass("active");

   //adiciona o active de acordo com o input
   $("#"+menuatual).addClass("active in");
   $("ul.nav-tabs li a[href='#"+menuatual+"']").addClass("active");
}

Aqui $("ul.nav-tabs li").removeClass("active"); você remove a classe de todos os <li> de uma só vez.

Aqui $("#"+menuatual).addClass("active in"); você adiciona a classe ao elemento que tem o id igual ao valor do input, apenas concatenando o símbolo # antes para selecionar o elemento.

Aqui $("ul.nav-tabs li a[href='#"+menuatual+"']").addClass("active"); você adiciona a classe ao elemento <a> que possui o atributo href igual ao valor do input, também concatenando o símbolo #.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .