Chamar nav-tabs pelo botão usando JavaScript [RESOLVIDO]

18 de maio de 2021 8 respostas

pellegrini2106 18 de maio de 2021

Ola galera venho por meio deste tópico mostrar minha duvida como chamar a próxima aba do nav-tabs
pelo input button usando o javascript. eu usei a estrutura do Bootstrap para demonstrar minha duvida.

Olha a minha estrutura.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">..
<br>
     <button type="button" class="btn btn-primary">IR PARA ABA PROFILE:</button>
</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">.
 <br>
<button type="button" class="btn btn-primary">IR PARA ABA CONTACT:</button>
<br><br>
<button type="button" class="btn btn-danger">VOLTAR ABA HOME:</button>
</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<button type="button" class="btn btn-danger">VOLTAR PARA ABA PROFILE:</button>
</div>
</div>

passar.js

$("#tabs").tabs();

$(".proximo").on("click", function() 
{
    var indice = $('#tabs ul li a[href="#' + $(this).parent().prop("id") + '"]').parent().index();
    
    $("#tabs").tabs("option", "active", (indice + 1));
});

OBS: Quero que as abas passem para outra ao clilcar no botao, mas nao estou conseguindo

8 Respostas

Lucas_Camara 18 de mai. de 2021

Faltou postar o arquivo passar.js.

pellegrini2106 18 de mai. de 2021 1 like

Já postei Lucas eu só quero através do JS que as abas passe de uma para outra quando clicar no botão próximo ou voltar.

Obrigado

pellegrini2106 19 de mai. de 2021

Lucas_Camara cade você meu filho!!!

Lucas_Camara 19 de mai. de 2021

Eae mano. Vc conseguiria pegar esse html junto com o JS dessas abas e jogar em https://jsfiddle.net/ e mandar o link aqui?

Lucas_Camara 20 de mai. de 2021

Acesse agora, mas não tah funcionando. Tu tem que adicionar as libs no jsfiddle para ele funcionar.

pellegrini2106 20 de mai. de 2021

Lucas_Camara eu acessei e esta em branco!!!

Lucas_Camara 20 de mai. de 2021

Achei um exemplo do que vc está tentando fazer: https://www.codeply.com/go/bp/120472

pellegrini2106 24 de mai. de 2021

Galera Consegui Resolver meu Problema com relação a troca de aba num click do botão realizada pelo JS quero muito agradecer a paciência de vocês vou postar o código certo para que outras pessoas poderão tirar como exemplo ok!!! abraços!!!

JS.
Obs no atributo a [data_id="’ + index + ‘"]’ o atributo “a” foi substituído pelo atributo “button” ok!!!

function doTab(obj) {

var index = $(".active").attr(“data_id”);//get current active tab

if (obj == “Previous”) {

index = parseInt(index) - 1;//parseInt() convert index from string type to int type

}

else {

index = parseInt(index) + 1;

}

$(’.nav-tabs button[data_id="’ + index + ‘"]’).tab(‘show’);

}

HTML.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>teste tab</title>
        <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    <body>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button type="button" class="nav-link active" data_id="1" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"  role="tab" aria-controls="home" aria-selected="true">Home</button>
            </li>
            <li class="nav-item" role="presentation">
                <button type="button" class="nav-link" data_id="2" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
            </li>
            <li class="nav-item" role="presentation">
                <button type="button" class="nav-link" data_id="3" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <br>
                <button type="button" class="btn btn-primary"  id="Next" onclick="doTab('Next')">Proxímo:</button>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <br>
                <button type="button" class="btn btn-primary"  id="Next" onclick="doTab('Next')">Proxímo:</button>    
                <br><br>
                <button type="button" class="btn btn-danger" id="Previous" onclick="doTab('Previous')">Anterior:</button>    
            </div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <br>
                <button type="button" class="btn btn-danger" id="Previous" onclick="doTab('Previous')">Anterior:</button> 
            </div>
        </div>
    </body>
    <script src="js/JQuery_3_6_0.js"></script> 
    <script src="js/bootstrap.js"></script> 
    <script src="js/bootstrap.bundle.js"></script> 
    <script src="js/passar.js"></script> 
</html>

Criado 18 de maio de 2021

Ultima resposta 24 de mai. de 2021

Respostas 8

Participantes 2

8 Respostas

Topicos relacionados