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

Front-end HTML
#1

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

#2

Faltou postar o arquivo passar.js.

#3

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

1 curtida
#5

Lucas_Camara cade você meu filho!!!

#6

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

#9

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

#11

Lucas_Camara eu acessei e esta em branco!!!

#12

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

#14

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>