Conteudo das "nav-tabs" do Bootstrap são exibidas todas de uma só vez no carregamento da página

Front-end
#1

Bom dia galera !! Estou com um problema na página inicial de minha aplicação web. É o seguinte: tenho um “panel-body” contendo três “nav-tabs” e um “tab-content” com três “div”, que contem o conteúdo das respectivas “nav-bar”. O problema é que quando a pagina é carregada as tres “div” são todas exibidas de uma só vez na pagina, de forma que uma fique em cima da outra. Conforme podemos perceber na imagem abaixo.

divs_graficos.PNG1077×954 191 KB

O que eu quero, é que quando a pagina for carregada, apenas a primeira “div” que já deve vim ativada por padrão, seja exibida. As demais, somente quando for clicado na nav-bar correspondente. Até que consegui fazer dessa forma, retirando o termo “fade in active” do atributo “class” da div. Só que quando faço assim, o campo de inserir a data para a consulta fica bloqueado nessa div. Segue o código-fonte abaixo para mais detalhes.

	<div>
		<div class="panel panel-default">
			<div class="panel-heading">Parametros Meteorologicos de
				Superficie na cidade de Picos - PI</div>
			<!-- /.panel-heading -->
			<div class="panel-body">
				<!-- Nav tabs -->
				<ul class="nav nav-tabs">
					<li class="active"><a data-toggle="tab" href="#temperatura">Temperatura</a></li>
					<li><a data-toggle="tab" href="#umidade">Umidade</a></li>
					<li><a data-toggle="tab" href="#pressao">Pressão</a></li>
				</ul>

				<!-- Tab panes -->
				<div class="tab-content">
					<div id="temperatura" class="tab-pane fade in active"
						style="width: 100%; height: 400px;"></div>
					<div id="umidade" class="tab-pane fade in active"
						style="width: 100%; height: 400px;"></div>
					<div id="pressao" class="tab-pane fade in active"
						style="width: 100%; height: 400px;"></div>
				</div>
			</div>
			<!-- /.panel-body -->
		</div>
		<!-- /.panel -->
	</div>

Alguém aí poderia me ajudar com esse problema ? Grato !!
Obs: estou utilizando Bootstrap.

#2

@Ivanildolima01 você poderia colocar o código escrito para que eu possa te ajudar? Você esta usando o bootstrap.js ?

#3

Alterei já. Estou usando bootstrap.min.js

#4

Agora está funcionando?

#5

Não está funcionando, continua do mesmo jeito. Quiz apenas dizer que tinha editado o tópico.

#6

O problema foi somente porque você colocou classe active para todos painéis:
`

`

Deixando somente no primeiro tab-pane a classe active somente ela irá aparecer na tela assim que carregar a página:
`

`
1 curtida
#7

Como tinha falado no primeiro post, dessa forma até que funciona, mas os campos para inserção de data para consulta ficam bloqueados.

#8

Ivanildo isso vai acontecer mesmo. Pois é o comportamento das Tab Panels do Bootstrap. Esconder os painéis que ñ estão ativos.

O que você pode fazer caso queira que apareça sempre o filtro de data é colocar ele por fora dessa estrutura. Espero ter ajudado.

Não sei se você já viu este site mas aqui você pode ter algumas referências:
http://wrapbootstrap.com/preview/WB0R5L90S

#9

Enetendo…Mas quando clico nas nav-bar eles ficam no lugar certo, a questão é só no primeiro carregamento da pagina. Não teria como alterar esse atributo conforme a nav-bar que tivesse ativa no momento ?

#10

Fera, isso é fechamento de div se não me engano…
Também aconteceu comigo, me ferrei pra achar pq eram 6 navs
Como o seu são 3, fica mais facil.