How to navigate trough tabs HTML - html

Question

I am new with HTML and i downloaded a template that uses Tabs and this is how is rendered:
So What I need is to when I click on "Próximo" it changes the tabs to the next or other that I choose.
I tried to do something like that, but it didn't worked! :
<button type="button" class="btn btn-danger nav-link" aria-expanded="true" href="#Legal" data-toggle="tab">
Próximo
</button>
The code :
<ul class="nav nav-tabs mb-3">
<li class="nav-item">
<a href="#CompanyData" data-toggle="tab" aria-expanded="false" class="nav-link active">
<i class="mdi mdi-home-variant d-lg-none d-block mr-1"></i>
<span class="d-none d-lg-block">Dados da Empresa</span>
</a>
</li>
<li class="nav-item">
<a href="#Legal" data-toggle="tab" aria-expanded="true"
class="nav-link">
<i class="mdi mdi-account-circle d-lg-none d-block mr-1"></i>
<span class="d-none d-lg-block">Cadastrar Empresa</span>
</a>
</li>
<li class="nav-item">
<a href="#listCompanies" data-toggle="tab" aria-expanded="false" class="nav-link">
<i class="mdi mdi-settings-outline d-lg-none d-block mr-1"></i>
<span class="d-none d-lg-block">Listar Empresas</span>
</a>
</li>
</ul>
And
<div class="tab-content">
<div class="tab-pane show active" id="CompanyData">
</div>
<div class="tab-pane " id="Legal">
</div>
<div class="tab-pane" id="listCompanies">
</div>
</div>

Answer 1

You can't make another buttons do the task of a tab button because internally bootstrap.js makes several changes to it. But what we can do is to simulate the click event and make the tab button click if we click our button.
Add a callback function on a click to our button as below
<button onclick="makeClick()" type="button" class="btn btn-danger nav-link" aria-expanded="true" href="#Legal" data-toggle="tab">
Próximo
</button>
Assign id to each li in list
<ul class="nav nav-tabs mb-3">
<li class="nav-item" >
<a href="#CompanyData" id="Dados" data-toggle="tab" aria-expanded="false" class="nav-link active">
<i class="mdi mdi-home-variant d-lg-none d-block mr-1"></i><span class="d-none d-lg-block">Dados da Empresa</span>
</a>
</li>
<li class="nav-item">
<a href="#Legal" id="Cadastrar" data-toggle="tab" aria-expanded="true"
class="nav-link">
<i class="mdi mdi-account-circle d-lg-none d-block mr-1"></i><span class="d-none d-lg-block">Cadastrar Empresa</span>
</a>
</li>
<li class="nav-item">
<a href="#listCompanies" id="Listar" data-toggle="tab" aria-expanded="false" class="nav-link">
<i class="mdi mdi-settings-outline d-lg-none d-block mr-1"></i><span class="d-none d-lg-block">Listar Empresas</span>
</a>
</li>
And in your JS file create the below function:
makeClick(){
$('#Listar').click(); //this will simulate the click and Listar tab will be opened
}
Code:
function makeClick() {
$('#Cadastrar').click();
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<ul class="nav nav-tabs mb-3">
<li class="nav-item">
<a href="#CompanyData" id="Dados" data-toggle="tab" aria-expanded="false" class="nav-link active">
<i class="mdi mdi-home-variant d-lg-none d-block mr-1"></i><span class="d-lg-block"> Dados da Empresa </span>
</a>
</li>
<li class="nav-item">
<a href="#Legal" id="Cadastrar" data-toggle="tab" aria-expanded="true" class="nav-link">
<i class="mdi mdi-account-circle d-lg-none d-block mr-1"></i><span class="d-lg-block">Cadastrar Empresa</span>
</a>
</li>
<li class="nav-item">
<a href="#listCompanies" id="Listar" data-toggle="tab" aria-expanded="false" class="nav-link">
<i class="mdi mdi-settings-outline d-lg-none d-block mr-1"></i><span class="d-lg-block">Listar Empresas</span>
</a>
</li>
<div class="tab-content">
<div class="tab-pane show active" id="CompanyData" role="tabpanel">
Dados da Empresa Tab
<button onclick="makeClick()" type="button" class="btn btn-danger nav-link" aria-expanded="true" href="#Legal" data-toggle="tab">Próximo
</button>
</div>
<div class="tab-pane " id="Legal" role="tabpanel">
Cadastrar Empresa Tab
</div>
<div class="tab-pane" id="listCompanies" role="tabpanel">
Listar Empresas Tab
</div>
</div>