Bootstrap com NAVBAR, COLLAPSE e DATA-PARENT

27/01/2017

0

Olá,

Estou utilizando o BOOTSTRAP com NAVBAR e COLLAPSE, consegui fazer funcionar normalmente.

Quando eu clico na "Opção 1" ele mostra o respectivo conteúdo, se eu clicar novamente ele esconde o conteúdo.

Porém o que eu não consegui fazer é que se o conteúdo da "Opção 1" estiver sendo exibido, ao clicar na "Opção 2" ele esconda automaticamente o conteúdo da primeira opção e mostre somente o conteúdo da segunda opção. Ele acaba colocando o conteúdo desta segunda opção abaixo do conteúdo da primeira.

Eu tentei utilizar o DATA-PARENT para relacionar as opções mas não funcionou.


   <body>

            <div id="opcao1" class="container collapse">
               <h3>Opção 1</h3>
               <ul class="nav nav-tabs nav-justified">
                  <li class="active"><a data-toggle="tab" href="#opcao1_tab1"><b>Tab 1</b></a></li>
                  <li><a data-toggle="tab" href="#opcao1_tab2"><b>Tab 2</b></a></li>
               </ul>
               <div class="tab-content">
                  <div id="opcao1_tab1" class="tab-pane fade in active">
                     <table class="table table-content table-condensed table-hover">
                        <thead>
                           <tr>
                              <th>Sequência</th>

Andvenancio

Andvenancio

Responder

Posts

27/01/2017

Andvenancio

Conteúdo correto:

<html lang="pt-BR">

   <head>
      <title>Teste</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-submenu.min.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap-submenu.min.js" defer></script>
      <script>
         $(document).ready(function() {
             $("a.dropdown-toggle").click(function(ev) {
                 $("a.dropdown-toggle").dropdown("toggle");
                 return false;
             });
             $("ul.dropdown-menu a").click(function(ev) {
                 $("a.dropdown-toggle").dropdown("toggle");
                 return false;
             });
             $('[data-submenu]').submenupicker();
         });
      </script>      
   </head>
   
   <body>

      <div class="mix">

         <div class="panel-group" id="opcoes">

            <nav class="navbar navbar-inverse">
               <div class="container-fluid">
                  <div class="navbar-header menuitem">
                     <a class="navbar-brand">TITULO</a>
                     <ul class="nav navbar-nav">
                        <li><a data-toggle="collapse" data-parent="#opcoes" href="#opcao1">Opção 1</a></li>
                        <li><a data-toggle="collapse" data-parent="#opcoes" href="#opcao2">Opção 2</a></li>
                     </ul>
                  </div>
               </div>
            </nav>

            <div id="opcao1" class="container collapse">
               <h3>Opção 1</h3>
               <ul class="nav nav-tabs nav-justified">
                  <li class="active"><a data-toggle="tab" href="#opcao1_tab1"><b>Tab 1</b></a></li>
                  <li><a data-toggle="tab" href="#opcao1_tab2"><b>Tab 2</b></a></li>
               </ul>
               <div class="tab-content">
                  <div id="opcao1_tab1" class="tab-pane fade in active">
                     <table class="table table-content table-condensed table-hover">
                        <thead>
                           <tr>
                              <th>Sequência</th>
                              <th>Data</th>
                              <th>Valor</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <td>1</td>
                              <td>11/03/1996</td>
                              <td>0.00</td>
                           </tr>
                           <tr>
                              <td>2</td>
                              <td>18/03/1996</td>
                              <td>0.00</td>
                           </tr>
                        </tbody>
                     </table>
                     <button type="button" class="btn btn-primary active">Novo - Op1.Tab.1</button>
                     <button type="button" class="btn btn-primary disabled">Alterar - Op1.Tab.1</button>
                  </div>
                  <div id="opcao1_tab2" class="tab-pane fade">
                     <table class="table table-content table-condensed table-hover">
                        <thead>
                           <tr>
                              <th>Sequência</th>
                              <th>Data</th>
                              <th>Valor</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <td>1</td>
                              <td>29/09/2003</td>
                              <td>0.00</td>
                           </tr>
                           <tr>
                              <td>2</td>
                              <td>06/10/2003</td>
                              <td>0.00</td>
                           </tr>
                        </tbody>
                     </table>
                     <button type="button" class="btn btn-primary active">Novo - Op1.Tab.2</button>
                     <button type="button" class="btn btn-primary disabled">Alterar - Op1.Tab.2</button>
                  </div>
               </div>            
            </div>
            
            <div id="opcao2" class="container collapse">
               <h3>Opção 2</h3>
               <ul class="nav nav-tabs nav-justified">
                  <li class="active"><a data-toggle="tab" href="#opcao2_tab1"><b>Tab 1</b></a></li>
                  <li><a data-toggle="tab" href="#opcao2_tab2"><b>Tab 2</b></a></li>
               </ul>
               <div class="tab-content">
                  <div id="opcao2_tab1" class="tab-pane fade in active">
                     <table class="table table-content table-condensed table-hover">
                        <thead>
                           <tr>
                              <th>Sequência</th>
                              <th>Data</th>
                              <th>Valor</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <td>1</td>
                              <td>11/03/1996</td>
                              <td>0.00</td>
                           </tr>
                        </tbody>
                     </table>
                     <button type="button" class="btn btn-primary active">Novo - Op2.Tab.1</button>
                     <button type="button" class="btn btn-primary disabled">Alterar - Op2.Tab.1</button>
                  </div>
                  <div id="opcao2_tab2" class="tab-pane fade">
                     <table class="table table-content table-condensed table-hover">
                        <thead>
                           <tr>
                              <th>Sequência</th>
                              <th>Data</th>
                              <th>Valor</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <td>1</td>
                              <td>29/09/2003</td>
                              <td>0.00</td>
                           </tr>
                        </tbody>
                     </table>
                     <button type="button" class="btn btn-primary active">Novo - Op2.Tab.2</button>
                     <button type="button" class="btn btn-primary disabled">Alterar - Op2.Tab.2</button>
                  </div>
               </div>            
            </div>
            
         </div>
      
      </div>

   </body>
   
</html>
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar