Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gmps

problema com div - [visible & hidden]

Por , em Javascript

Recommended Posts

gmps    0

gmps
Postado

galera..eu tenho o seguinte codigo

 

function switch_menu(nome){
	subcat_name = "subcat_"+nome;
	subcat_monit = "monit_"+nome;
	subcat = document.getElementById(subcat_name).className;
	if(subcat == "hidden"){
		document.getElementById(subcat_name).className = "visible";
	} else {
		document.getElementById(subcat_name).className = "hidden";
		// monit
		document.getElementById(subcat_monit).className = "hidden";
	}
}

e tenho no html:

<a href="java script: switch_menu('teste')" class="link">teste</a>

<div id="subcat_teste" bgcolor="#eaeaea" class="hidden">div do teste</div>

pq esse codigo nao funciona no IE? FF e Chrome da certo

 

=/

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Aqui não funcionou em lugar nenhum... exatamente oq você queria que acontecesse?

Ao clicar no link, a DIV deveria aparecer? é somente isso?

 

Eu fiz essas classes CSS, mas mesmo assim não vi nada acontecer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

gmps    0

gmps
Postado

entao..esqueci de colocar o css

<style type="text/css" media="screen">
 .hidden
 {
	display: none;
 }

 .show
 {
	display: block;
 }
 </style>

eu queria que qdo clicar no link, uma div iria aparecer, so isso

 

=/

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">

<head>

<script type="text/javascript">

function switchMenu(elemento) {

var subcat = document.getElementById(elemento);

if(subcat.style.display == 'none')

subcat.style.display = 'block';

else

subcat.style.display = 'none';

}

</script>

<style type="text/css">

#subcat_teste {

background-color: #eaeaea;

}

</style>

</head>

<body>

<a href="#" class="link" onclick="switchMenu('subcat_teste')">teste</a>

 

<div id="subcat_teste" style="display: none;">div do teste</div>

 

</body>

</html>

Testa ai

Compartilhar este post

Link para o post
Compartilhar em outros sites

gmps    0

gmps
Postado

só que é o seguinte, esse codigo meu esta dentro de uma div chamada menu

 

<div id="menu">

 

tem diferença ou nd haver?

 

 

como esta, e nao esta funcionando

 

function switchMenu(elemento) {
	// vars
	var subcat_name		= "subcat_" + elemento;
	var subcat_monit	= "monit_" + elemento;
	// ---
	if(subcat_name.style.display == 'none')		
		subcat_name.style.display = 'block';
	else
		subcat_name.style.display = 'none';	
		subcat_monit.style.display = 'none';
}

 

 

divs

echo "<tr>
	   <td width=\"75%\" bgcolor=\"#cccccc\"><img src=\"img/seta.gif\"> <a href=\"#\" onclick=\"switchMenu('$nomediv')\" class=\"link\">$equipamento</a></td>
 </tr>";

echo " <div id=\"subcat_$nomediv\" bgcolor=\"#eaeaea\" style=\"display:none;\"><img src=\"img/seta.gif\"> <a href=\"java script:switch_monit('$nomediv','$empresa_id','$cidade_id','$equipamento_id'); \" class=\"link\">Monitoramento</a></div>
<div id=\"monit_$nomediv\" bgcolor=\"#eaeaea\" class=\"hidden\">        <img src=\"img/seta.gif\"> <a href=\"java script:abredois('mostra_monitoramento.php?emp=$empresa_id&cid=$cidade_id&equi=$equipamento_id', 'topo', 'branco.php', 'meio_baixo'); \" class=\"link\">Consumo de Banda</a></div>

 

quando eu clico no lnik do "$equipamento", no IE da a seguinte msg: 'style.display' é nulo ou não é um objeto

 

no FF nem ta funcionando mais

 

=/

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

você RETIROU do meu código uma coisa MUITO importante ne?!

var subcat_name		= "subcat_" + elemento;
	var subcat_monit	= "monit_" + elemento;
Aqui você esqueceu de chamar o objeto pela ID.

Sem o "document.getElementById".. você nunca vai atingir os objetos...

 

primeiro rode o script que passei, entenda.. e depois aplique no teu caso..

você precisa mesmo separar o nome das coisas assim? com essa string?

 

Fazer o php imprimir tanto HTML realmente dá muito trabalho e gera confusão.. ja experimentou mudar isso?

<?php
aqui vem o código php e a abertura da chave {
?>
aqui vem código HTML limpo.. que não irá ser executado, se o php não quiser
<?
} // aqui você fechou a chave, ou seja, abriu o php rodar HTML, e fechou após o código
//assim você não precisa escapar todas as aspas... pois não tem php dando ECHO no HTML diretamente
?>

Compartilhar este post

Link para o post
Compartilhar em outros sites

gmps    0

gmps
Postado

bom...separar o codigo nao tem como, tenho que escapar da aspa com o php..

 

olha como esta e nao esta funcionando:

 

<script type="text/javascript">
function switch_menu(elemento) {
	// vars
	var subcat_name	= document.getElementById("subcat_" + elemento);
	var subcat_monit	= document.getElementById("monit_" + elemento);
	// ---
	if(subcat_name.style.display == 'none')	
	{
		subcat_name.style.display = 'block';
	} else {
		subcat_name.style.display = 'none';
		subcat_monit.style.display = 'none';
	}
}
</script>

<table width="169" border="1" bordercolor="#787878" bgcolor="#ededed">
   <tr>
	  <td width="75%" bgcolor="#cccccc"><img src="img/seta.gif"> <a href="#" onclick="switch_menu('1');" class="link">ROTEADOR - CISCO - 1720</a></td>
   </tr>
   <div id="subcat_1" bgcolor="#eaeaea" style="display: none;"><img src="img/seta.gif"> <a href="java script:switch_monit('ROTEADOR - CISCO - 1720__7','2','6','7'); " class="link">Monitoramento</a></div>
</table>

=/

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Bom.. a rigor, essa tabela não deveria estar ai, bem menos a DIV deveria estar dentro dela..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<script type="text/javascript">
function switch_menu(elemento) {
	// vars
	var subcat_name	= document.getElementById("subcat_" + elemento);
	var subcat_monit	= document.getElementById("monit_" + elemento);
	// ---
	if(subcat_name.style.display == 'none')	
	{
		subcat_name.style.display = 'block';
	} else {
		subcat_name.style.display = 'none';
		subcat_monit.style.display = 'none';
	}
}
</script>
</head>
<body>
<table width="169" border="1" bordercolor="#787878" bgcolor="#ededed">
   <tr>
	  <td width="75%" bgcolor="#cccccc"><img src="img/seta.gif"> <a href="#" onclick="switch_menu('1');" class="link">ROTEADOR - CISCO - 1720</a></td>
   </tr>
  
</table>
 <div id="subcat_1" bgcolor="#eaeaea" style="display: none;"><img src="img/seta.gif"> <a href="java script:switch_monit('ROTEADOR - CISCO - 1720__7','2','6','7'); " class="link">Monitoramento</a></div>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito