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.
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
Curtir tópico
+ 0
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
Clique aqui para fazer login e interagir na Comunidade :)
