javascript: alterar classes css

D

diutsu

Portugal@Home Member
boas, estou a ter aqui um pequeno problema e queria saber se alguém me podia ajudar:

eu quero que um determinado div se torne visível quando tenho o rato em cima de uma hiperligação, este div está definido assim:

Código: 
div id"alpha" class="hidden texto"
eu quero que quando tenho o rato por cima de um outra hiperligação definida por:

Código: 
 a onMouseOver="unhide('alpha');" onmouseout="unhide('alpha');"
o div se torne visível.
O que acontece é que este código javascript que eu estava a usar:

Código: 
function unhide(divID) {
  var item = document.getElementById(divID);
  if (item) {
    item.className=(item.className=='hidden')?'unhidden':'hidden';
  }
}
altera a class do div de "hidden texto" para "unhidden" assim o div deixa te ter os atributos da classe texto

estive a tentar resolver o problema e neste momento o javascript que estou a usar é este:

Código: 
function unhide(divID) {
  var item = document.getElementById(divID);
  var i;
  var classe = item.className;
    if (item)
    {
    
      var temp = new Array();
      temp = classe.split(' ');
      classe ="";
      while(i<temp.lenght)
      {
      if(temp[i]=="hidden"){
      temp[i]='hidden'?'unhidden':'hidden';}
      if(temp[i]!=""){
      classe =classe+temp[i]+" " ;      }
      i++;
      }
      item.className = classe;
      }
      }
mas continua a não bater certo alguém tem uma sugestão para resolver isto?
 
Última edição:
Já pensaste em usar jQuery?
Isso seria algo como:

Código: 
$("a").mouseover(function(){
  $("alpha").addclass("unhidden");
}).mouseout(function(){
$("alpha").removeclass("unhidden");
}
);

E não tens problemas com o numero de classes que cada elemento pode ter.
 
Código: 
<script type="text/javascript">
function hideElement()
{
document.getElementById("p1").style.display="none";
}
function showElement()
{
document.getElementById("p1").style.display="block";
}

</script>

<p id="p1">Texto</p>

Hide:<input type="button" onclick="hideElement()">
<br>
Show:<input type="button" onclick="showElement()">

agora e so ajustares a tua medida (receber parametro, em vez de onclick onmouseover, etc)
 
Obrigado pelas respostas.

Quanto ao JQuery, digamos que prefiro perceber bem o javascript primeiro antes de seguir para outra.

Quanto ao meu problema. Warlord a tua solução não serve para os meus objectivos:

Passo a explicar porque, eu quero que quando passe o rato por cima de um link este mostre conteudo que esta escondido, e quando eu volte a passar por cima dele outra vez ele esconda o que foi mostrado, estás a perceber?
no teu exemplo são precisos 2 links, um para mostrar e outro para esconder.

Já consegui resolver o meu problema da seguinte maneira:
Usei um div geral que contem todos os div's que eu quero esconder/mostrar e dei a esse div geral uma classe.
 
eu quero que quando passe o rato por cima de um link este mostre conteudo que esta escondido, e quando eu volte a passar por cima dele outra vez ele esconda o que foi mostrado,
Clicar para expandir...
Experimenta isto:
Código: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
i=0;
function showhide()
 {if(i==0){document.getElementById("p1").style.display="none";i=1;}
else{document.getElementById("p1").style.display="block";i=0}
}
</script>
</head>



<body>
<a href="#" onmouseover="showhide()">ShowHide</a>
<p id="p1">Texto</p>

</body>
</html>
Acho que fazes bem em aprender javascript primeiro, mas dá uma vista de olhos ao jQuery que vale a pena.
cumps
 
obrigado, vou experimentar

EDIT: Só funciona se eu usar apenas um link, se tiver 2 ou mais deixa de funcionar.

EDIT2: Encontrei!

Código: 
function unhide(divID)
    {if(document.getElementById(divID).style.display=="block")
    {document.getElementById(divID).style.display="none";}
    else
    {document.getElementById(divID).style.display="block";}
    }
Assim funciona como é suposto, mas não acham que se deveria substituir o else por um if com a condição document.getElementById(divID).style.display=="none", para evitar confusões?
 
Última edição:
warlock, por acaso ontem fui para a cama a pensar nisso.

Código: 
function ShowHide(divID,action)
    {
    if (action=="show" || action=="both"){
    document.getElementById(divID).style.display="block";}
    if (action=="hide" || action=="none"){
    document.getElementById(divID).style.display="none";}
    if (action=="both" || action==null){
    if(document.getElementById(divID).style.display=="block"){document.getElementById(divID).style.display="none";}
    else{document.getElementById(divID).style.display="block";}
    }
}
e hoje toca a malhar no assunto. xD

Tentei com um swich, que é mais indicado mas por alguma razão não funciona. :sad:
 
diutsu disse:
warlock, por acaso ontem fui para a cama a pensar nisso.

Código: 
function ShowHide(divID,action)
    {
    if (action=="show" || action=="both"){
    document.getElementById(divID).style.display="block";}
    if (action=="hide" || action=="none"){
    document.getElementById(divID).style.display="none";}
    if (action=="both" || action==null){
    if(document.getElementById(divID).style.display=="block"){document.getElementById(divID).style.display="none";}
    else{document.getElementById(divID).style.display="block";}
    }
}
e hoje toca a malhar no assunto. xD

Tentei com um swich, que é mais indicado mas por alguma razão não funciona. :sad:
Clicar para expandir...

O que é que não funciona? Esse código ou o que tentaste fazer com 1 switch?
 
Inicie sessão ou registe-se para poder participar.
Back
Topo