1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

javascript: alterar classes css

Discussão em 'Web Development' iniciada por diutsu, 21 de Março de 2009. (Respostas: 12; Visualizações: 5984)

  1. diutsu

    diutsu [email protected] 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: 21 de Março de 2009
  2. unsilent

    unsilent Power Member

    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.
     
  3. diutsu

    diutsu [email protected] Member

    e isso é o que?
     
  4. unsilent

    unsilent Power Member

    É a melhor coisa que aconteceu à web desde o css...
    É uma framework/library de javascript-tipo mootools, prototype, etc- com uma sintaxe similar mas muito mais simplificada e intuitiva.
    http://jquery.com/
     
  5. Warlord

    Warlord [email protected] Member

    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)
     
  6. OldMan

    OldMan Power Member

    x2

    Já andei a brincar com jquery há uns tempos e pareceu ter bastante potencial.
     
  7. diutsu

    diutsu [email protected] Member

    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.
     
  8. unsilent

    unsilent Power Member

    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
     
  9. diutsu

    diutsu [email protected] Member

    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: 22 de Março de 2009
  10. Warlord

    Warlord [email protected] Member

    se so alternas entre none e block nao tem problema estar assim
     
  11. diutsu

    diutsu [email protected] Member

    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:
     
  12. Huckleberry

    Huckleberry Power Member

    O que é que não funciona? Esse código ou o que tentaste fazer com 1 switch?
     
  13. diutsu

    diutsu [email protected] Member

    O que tentei fazer com o switch.
     

Partilhar esta Página