0
I have a navbar that shows content on the same page, according to the "tab" I choose from it. The problem is that if I enter a certain "tab" (two-stakes block, for example) and there I click on a button (calculate) to perform any function, it performs this function, but at the end it simply goes back to the home tab instead of continuing in the same one where it was.
See part of the code.
<nav class="navbar navbar-inverse"> <!-- BARRA DE MENU. ELA SE AJUSTA AUTOMATICAMENTE 'fluid'-->
<div class="container-fluid">
<ul class="nav navbar-nav fluid">
<li class="active"><a data-toggle="pill" href="#home">HOME</a></li>
<li><a data-toggle="pill" href="#duasestacas">BLOCO COM DUAS ESTACAS</a></li>
<li><a data-toggle="pill" href="#tresestacas">BLOCO COM TRÊS ESTACAS</a></li>
<li><a data-toggle="pill" href="#quatroestacas">BLOCO COM QUATRO ESTACAS</a></li>
<li><a data-toggle="pill" href="#cincoestacas">BLOCO COM CINCO ESTACAS</a></li>
<li><a data-toggle="pill" href="#relatorios">RELATÓRIOS</a></li>
</ul>
</div>
</nav>
<div class="tab-content"> <!-- ITENS DO MENU POSTOS DENTRO DAS DIVS COM SEUS RESPECTIVOS ID-->
<div id="home" class="tab-pane active">
<!-- ***********************************************************IMAGENS**************************************** -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img width="auto" height="auto" src="imagens/home1.png" alt="">
</div>
<div class="item">
<img width="auto" height="auto" src="imagens/home2.png" alt="">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">ANTERIOR</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">PRÓXIMO</span>
</a>
</div>
<!-- ***********************************************************IMAGENS**************************************** -->
</div>
<!-- BLOCO COM DUAS ESTACAS -->
<div id="duasestacas" class="tab-pane fade">
<div class="row">
<div class="col-md-7"> <!-- COLUNA ESQUERDA -->
<form class="form-horizontal"> <!-- FORMULÁRIO -->
<h2><p class="text-justify">Observe a imagem e preencha os campos atentando-se às unidades solicitadas.</p></h2>
<br><br>
<div class="form-group">
<label class="col-sm-4 control-label">AÇO CA-50 (kN/cm²):</label>
<div class="col-sm-3">
<input id="aco2" type="number" class="form-control" value="50" placeholder= "Resistência ao escoamento do aço." disabled>
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-4 control-label">Normal Característica [Nk] (kN):</label>
<div class="col-sm-3">
<input id="nk2" type="number" class="form-control" value="700" placeholder="Força normal resultante.">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-4 control-label">fck (kN/cm²):</label>
<div class="col-sm-4">
<select onchange="" class="form-control" style="width: 167px" id="fck2">
<option value="0">0</option>
<option value="2">2,0</option>
<option selected value="2.5">2,5</option>
<option value="3">3,0</option>
<option value="3.5">3,5</option>
<option value="4">4,0</option>
<option value="4.5">4,5</option>
<option value="5">5,0</option>
</select>
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-4 control-label">Diâmetro da estaca [φe] (cm):</label>
<div class="col-sm-3">
<input id="diametro2" type="number" class="form-control" value="40" placeholder="Diâmetro da estaca.">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-4 control-label">Espaçamento [e] (cm):</label>
<div class="col-sm-3">
<input id="espacamento2" type="number" class="form-control" value="100" placeholder="Espaçamento entre estacas.">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-4 control-label">Cobrimento (cm):</label>
<div class="col-sm-3">
<input id="cobrimento2" type="number" class="form-control" value="4" placeholder="Cobrimento.">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-4 control-label">Base da seção do pilar (cm):</label>
<div class="col-sm-3">
<input id="basep2" type="number" class="form-control" value="50" placeholder="Base da seção do pilar.">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-4 control-label">Altura da seção do pilar (cm):</label>
<div class="col-sm-3">
<input id="alturap2" type="number" class="form-control" value="20" placeholder="Altura da seção do pilar.">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-4 control-label">Maior φ pilar (mm):</label>
<div class="col-sm-4">
<select class="form-control" style="width: 167px" id="armadurap2">
<option value="5">5,0</option>
<option value="6.3">6,3</option>
<option value="8">8,0</option>
<option value="10">10,0</option>
<option selected value="12.5">12,5</option>
<option value="16">16,0</option>
<option value="20">20,0</option>
<option value="25">25,0</option>
<option value="32">32,0</option>
<option value="40">40,0</option>
</select>
</div>
</div>
<br>
<div class="form-group">
<div class="col-sm-6">
<button onclick="teste();" class="btn btn-primary navbar-btn"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> CALCULAR</button>
<button onclick="limparcalculos2();" class="btn btn-danger navbar-btn"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> LIMPAR CÁLCULOS</button>
</div>
</div>
<br>
</form>
</div>
<div class="col-md-5"> <!-- COLUNA DIREITA -->
<br><br><br><br><br><br>
<p align="center"><img src="imagens/duasestacas.jpg" width=100%></p>
</div>
</div>
<div id="respduasestacas" class="row-fluid"> <!-- **************************RESPOSTAS************************** -->
</div> <!-- **************************RESPOSTAS************************** -->
</div>
<!-- ********************************************************************************************************** -->
Question Luciano. Is this part with the code of the tabs inside some form (<form>) ? If you are, I believe that your problem is that by clicking on one of the buttons and calling the test() or clear functions2(), the button is also giving a Ubmit in your form, with this it posts the page and in the postback it reloads everything and, In doing so, your tab component is created again in the initial state, i.e., with the first tab selected. If so, I suggest you replace <button> with <input type="button"> and then it will resolve.
– Thiago Henrique
OK thanks. That’s it, I removed the buttons of the form there solved. Hug.
– Luciano Junior
That’s good. Hugs...
– Thiago Henrique