andersonvenancio
-
Posts
2 -
Cadastrado em
-
Última visita
-
Bootstrap com navbar, collapse e data-parent
andersonvenancio respondeu ao tópico de andersonvenancio em Web e banco de dados
Obrigado, funcionou como eu precisava!! -
Bootstrap com navbar, collapse e data-parent
andersonvenancio postou um tópico em Web e banco de dados
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. Dei uma olhada na documentação do Bootstrap e fiz algumas pesquisas, mas não achei nenhum exemplo que seja parecido com isto que eu preciso. Segue o código. <!DOCTYPE html> <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="options"> <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="#options" href="#opcao1">Opção 1</a></li> <li><a data-toggle="collapse" data-parent="#options" 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>
Sobre o Clube do Hardware
No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais
Direitos autorais
Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais
