Toggle Bootstrap navbar tabs with internal button click

1

How do I change from one tab from navbar to another by clicking a button inside one of the tabs. Example:

I'm in the load capacity tab, in its contents there is a button that when clicked should switch to the block with two stakes tab.

Follow the code for 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 [&phi;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 &phi; 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>&nbsp;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 [&phi;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 &phi; 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>&nbsp;CALCULAR</button>
                                &nbsp;&nbsp;&nbsp;
                                <button onclick="limparcalculos2();" class="btn btn-danger navbar-btn"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;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>

                

    
asked by anonymous 13.12.2017 / 13:16

0 answers