Esconder e mostrar camadas simultaneamente

[Thiago Carvalho 0]

Bom dia,

mais uma vez venho nesse forúm com o mesmo problema, da primeira postei de forma incorreta, então agora eu posto da maneira adequada.

 

Estrou trabalhando em um efeito já conhecido de mostrar e esconder camadas usando a propriedade display (alternando entre'none'e 'block') e height (alternando entre '1px' e '1%'). Até aí tudo bem a funão abaixo resolve esse problema :

 

function camada ( sId ) {
4 var sDiv = document.getElementById ( sId );
5 if ( (sDiv.style.visibility == "hidden") && (sDiv.style.position == "absolute") && ( sDiv.style.overflow == "scroll" ) && ( sDiv.style.height == "1px" )) {
6 sDiv.style.visibility = "visible";
7 sDiv.style.position = "relative";
8 sDiv.style.overflow = "auto";
9 sDiv.style.height = "1%";
10 }
11 else {
12 sDiv.style.visibility = "hidden";
13 sDiv.style.position = "absolute";
14 sDiv.style.overflow = "scroll";
15 sDiv.style.height = "1px";
16 }
17}

No entanto surgiu a necessidade de fechar uma camada aberta ao abrir outra, pois o browser sempre vai pro topo quando fechamos ou abrimos as camadas. Isso torna a navegação um pouco inconveniente para quem quer ver todas as camadas.

E nesse ponto tentei várias possibilidades ´chegando a esse código:

 

var camadas = new Array(23)

camadas[0] = "PlanejamentoeGestaodoTurismoCultural"
camadas[1] = "GestaoEstrategicaEmpresarialEnfaseContabilidade"
camadas[2] = "GestaoEstrategicaemRecursosHumanos"
camadas[3] = "GestaoEstrategicaEmpresarial"
camadas[4] = "AdmPublicaGestaoPublicaMunicipal"
camadas[5] = "GestaoAgronegociosAgriculturaFamiliar"
camadas[6] = "GestaoTributaria"
camadas[7] = "ComunicacaoEmpresarial"
camadas[8] = "JornalismoeMidia"
camadas[9] = "PoliticaDireitoPrevidenciario"
camadas[10] = "DireitoPublico"
camadas[11] = "DireitoMaterialProcessualTrabalho"
camadas[12] = "EducacaoGeoAmbiental"
camadas[13] = "EducacaoMatematica"
camadas[14] = "DocenciaEnsinoSuperior"
camadas[15] = "LeituraInterpretacaoProducaoTexto"
camadas[16] = "PsicologiaEducacional"
camadas[17] = "GestaoTrabalhoPedagogico"
camadas[18] = "EducacaoInfantil"
camadas[19] = "AnatomiaHumana"
camadas[20] = "AtencaoDiagnosticaLaboratorioClinico"
camadas[21] = "SaudeMental"
camadas[22] = "GestaoSaudePublica" 


function camada(sId,camadas[n]) {
	var obj = document.getElementById(sId);
	var divs = document.getElementById(camadas[n]);
	for (var n=0; n<23; n++) {
if ( (divs.style.display == "block") && (divs.style.height == "1%") ) {
		divs.style.display = "none"; 
		divs.style.height = "1px";	
		}
if ( (obj.style.display == "none") && (obj.style.height == "1px") ) {
		obj.style.display = "block";
		obj.style.height = "1%";
		} else {
		obj.style.display = "none";
		obj.style.height = "1px%";
		}
		
  /*if ( (obj.style.display == "block") && (obj.style.height == "1%") ) {
		
			}	*/
	}
 }

 

essa é a chamda da função atual no site:

 

<p class="mostraresconder">
<a title="Comunicação Empresarial" onclick="camada ('ComunicacaoEmpresarial');" href="#">Comunicação Empresarial - Carga horária: 390h/a</a>
</p>

e essa é a chamada da função que eu tentei fazer:

 

<p  class="mostraresconder"><a href="#" ONCLICK="camada ('ComunicacaoEmpresarial',camadas[n]);" title="Comunicação Empresarial">Comunicação Empresarial - Carga horária: 390h/a</a></p>

Acredito que haja problemas sérios de sintaxe nesse último código, pois ainda estou engatinhando no JavaScript. Gostaria que pudessem solucionar meu problema me mostrando a sintaxe correta ou então alguma outra função que solucione o problema.

 

Este é o site que estou fazendo

 

vá no link comunicação!

 

Muito obrigado pela atenção, espero respostas,

 

Sem mais o que declarar, me despeço,

 

Thiago Carvalho

[GuttoSP 2]

Ôpa Thiago,

 

Acho que ocultar as outras camadas não seja a melhor opção, o usuário pode querer comparar conteúdos, exibir duas camadas ao mesmo tempo, coisas do tipo. Então para o seu caso basta usar âncoras, assim a página não irá rolar até o topo.

[Thiago Carvalho 0]

Ôpa Thiago,

 

Acho que ocultar as outras camadas não seja a melhor opção, o usuário pode querer comparar conteúdos, exibir duas camadas ao mesmo tempo, coisas do tipo. Então para o seu caso basta usar âncoras, assim a página não irá rolar até o topo.

É GuttoSP voce tem razão a nossa intenção era a priori isso. Apenas neutralizar esse efeito, mas como eu utilizo essas tais ancoras?? não conheço elas não.

 

valeu cara!

[GuttoSP 2]

Âncoras são tags básicas em HTML, dá uma lida nesses links:

 

Âncoras e Âncoras 2

[Thiago Carvalho 0]

Valeu GuttoSP,

 

você quebrou o galho mesmo, só que o cliente quer que quando uma camada abra a outra feche.

É aquele velho problema do 'cliente é quem manda'

 

aí alguem pode me ajudar fazer essa função funcionar

 

 

obrigado pela atenção!

[GuttoSP 2]

<html>

<head>

<script type="text/javascript">

<!--

function exibeDiv(div) {

//alert(div);

var divs = document.getElementsByTagName('div');

for (var i = 0; i < divs.length; i++) {

if (divs.className == "divShow") {

divs.className = "divHidden";

}

}

document.getElementById(div).className = "divShow";

}

//-->

</script>

</head>

<style type="text/css">

<!--

.divShow { display:block; }

.divHidden { display:none; }

-->

</style>

<body>

<p>

<a href="#" onClick="exibeDiv('div_a'); return false;">Link Link</a>

<p>

<a href="#" onClick="exibeDiv('div_b'); return false;">Link Link</a>

<br>

<br>

<br>

<div id='div_a' class="divHidden">

<p>Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A </p>

<p>Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A </p>

<p>Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A </p>

<p>Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A </p>

<p>Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A Conteúdo Div A </p>

</div>

<div id='div_b' class="divHidden">

<p>Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B </p>

<p>Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B </p>

<p>Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B </p>

<p>Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B </p>

<p>Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B Conteúdo Div B </p>

</div>