1
As change from one tab of the navbar to the other by clicking a button inside one of the tabs. Example:
I’m on the tab load capacity, in its contents there is a button that when clicked should switch to the tab block with two stakes.
Follow the code of the tabs.
<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="#capacidadedecarga">CAPACIDADE DE CARGA</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-->
<!-- HOME PAGE -->
<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>
<!-- CAPACIDADE DE CARGA -->
<div id="capacidadedecarga" 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">Preencha os campos atentando-se às unidades solicitadas.</p></h2>
<br><br>
<div class="form-group">
<label class="col-sm-5 control-label">AÇO CA-50 (kN/cm²):</label>
<div class="col-sm-3">
<input id="aco1" 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-5 control-label">Normal Característica [Nk] (kN):</label>
<div class="col-sm-3">
<input id="nk1" type="number" class="form-control" value="700" placeholder="Força normal resultante.">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-5 control-label">fck (kN/cm²):</label>
<div class="col-sm-5">
<select class="form-control" style="width: 167px" id="fck1">
<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-5 control-label">Diâmetro da estaca [φe] (cm):</label>
<div class="col-sm-3">
<input id="diametro1" type="number" class="form-control" value="40" placeholder="Diâmetro da estaca.">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-5 control-label">Espaçamento [e] (cm):</label>
<div class="col-sm-3">
<input id="espacamento1" type="number" class="form-control" value="100" placeholder="Espaçamento entre estacas.">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-5 control-label">Cobrimento (cm):</label>
<div class="col-sm-3">
<input id="cobrimento1" type="number" class="form-control" value="4" placeholder="Cobrimento.">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-5 control-label">Base da seção do pilar (cm):</label>
<div class="col-sm-3">
<input id="basep1" 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-5 control-label">Altura da seção do pilar (cm):</label>
<div class="col-sm-3">
<input id="alturap1" 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-5 control-label">Maior φ pilar (mm):</label>
<div class="col-sm-4">
<select class="form-control" style="width: 167px" id="armadurap1">
<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">
<label class="col-sm-5 control-label">Momento X [Mx] (kN.cm):</label>
<div class="col-sm-3">
<input id="momentox1" type="number" class="form-control" value="20" placeholder="Momento em torno do eixo x do pilar.">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-5 control-label">Momento Y [My] (kN.cm):</label>
<div class="col-sm-3">
<input id="momentoy1" type="number" class="form-control" value="20" placeholder="Momento em torno do eixo y do pilar.">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-5 control-label">Capacidade Nominal da Estaca (kN):</label>
<div class="col-sm-3">
<input id="capacidade1" type="number" class="form-control" value="300" placeholder="Capacidade de carga nominal da Estaca.">
</div>
</div>
<br>
</form>
<div class="form-group">
<div class="col-sm-6">
<button onclick="capacidadedecarga();" class="btn btn-primary navbar-btn"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> VERIFICAR</button>
</div>
</div>
<br>
</div>
<div class="col-md-5"> <!-- COLUNA DIREITA -->
<br><br><br><br><br><br><br><br>
<p align="center"><img src="imagens/capacidadedecarga.jpg" width=100%></p>
</div>
</div>
<div id="respcapacidadeestacas" class="row-fluid"> <!-- **************************RESPOSTAS************************** -->
</div> <!-- **************************RESPOSTAS************************** -->
</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 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">
<label class="col-sm-4 control-label">Momento Y [My] (kN.cm):</label>
<div class="col-sm-3">
<input id="momentoy2" type="number" class="form-control" value="20" placeholder="Momento em torno do eixo y do pilar.">
</div>
</div>
<br>
<div class="form-group">
<label style="color:red; text-align: justify;" class="col-sm-7 control-label">Momento X não interfere na capacidade das estacas. Lembre-se que para este bloco é necessário uma viga na direção X para resistir ao esforço desse momento.</label>
</div>
<br>
</form>
<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>
</div>
<div class="col-md-5"> <!-- COLUNA DIREITA -->
<br><br><br><br><br><br>
<p align="center"><img src="imagens/duasestacas.jpg" width=90%></p>
</div>
</div>
<div id="respduasestacas" class="row-fluid"> <!-- **************************RESPOSTAS************************** -->
</div> <!-- **************************RESPOSTAS************************** -->
</div>
Maybe not the most correct way, but I created a link outside the Btn with the same Nav type feature like this: <the data-toggle="Pill" href="#duasestacas"><button onclick="capacidadedecarga();" class="btn btn-Primary navbar-btn"><span class="glyphicon glyphicon-Cog" Aria-Hidden="true"></span> VERIFY</button></a> . It even opens the right tab, but doesn’t give the Scroll to the top, doesn’t mark the correct tab in the Nav. But sometimes it can give you a light
– hugocsl
Thank you, that’s something.
– Luciano Junior