Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2011
    Messaggi
    31

    cambiare stile a div con onclick

    ciao a tutti!
    il titolo è un po generico...ma comunque...
    Nella mia pagina html ho tre link...
    codice:
    <a href="#" onclick="transizione1()" />
    <a href="#" onclick="transizione2()" />
    <a href="#" onclick="transizione3()" />
    e 3 div che devono comparire in base a quale link ho premuto...semplicemente aggiungendo una classe al div

    codice:
    function transizione1(){
      	document.getElementById('div1').className = 'opacita1';
    }
    function transizione2(){
      	document.getElementById('div2').className = 'opacita2';
    }
      function transizione3(){
      	document.getElementById('div3').className = 'opacita3';	
    }
    e fino a qui funziona tutto!!!!
    Il problema sorge nel momento in cui clicco sul secondo link...il primo non scompare!!
    Come faccio a intercettare quale link è stato cliccato in modo da poter sostituire la classe precedentemente associata con una che abbia opacity:0;.....sempre se sia questo il modo corretto?

    non conosco per niente javascript...percui se avete qualche suggerimento...è tutto ben accetto!!!!
    grazie

  2. #2
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    3,660


    codice:
    function transizione1(){
      	document.getElementById('div1').className = 'opacita1';
    document.getElementById('div2').className = 'opacita0';
    document.getElementById('div3').className = 'opacita0';
    }
    function transizione2(){
      	document.getElementById('div2').className = 'opacita2';
    document.getElementById('div1').className = 'opacita0';
    document.getElementById('div3').className = 'opacita0';
    }
      function transizione3(){
      	document.getElementById('div3').className = 'opacita3';	
    document.getElementById('div1').className = 'opacita0';
    document.getElementById('div2').className = 'opacita0';
    }

  3. #3
    Utente di HTML.it
    Registrato dal
    Mar 2011
    Messaggi
    31
    beh si...il discorso è un po più complicato...colpa mia...pensavo di semplificarvi la vita!!!
    in realta le classi che vado ad associare ai div sono animazioni css3 per cui se facessi una cosa del genere verrebbe fuori un casotto...partirebbero tutte le animazioni insieme!

    Pensavo di preimpostare 3 variabili a 1
    codice:
    var pag1 = 1;
    var pag2 = 1;
    var pag3 = 1;
    e poi quando viene eseguita la funzione mi imposta la variabile a 0

    codice:
    function transizione1(){
      	document.getElementById('div1').className = 'movimento1';
            var pag1 = 0;
      }
    e cosi via per gli altri 2
    sempre all'interno della funzione transizione1 ad esempio, i controlli
    codice:
    function transizione1(){
      	document.getElementById('div1').className = 'movimento1';
            if(pag2 == 0){
            document.getElementById('div2').className = 'movimento2_al_contrario';
            }
            if(pag3 == 0){
            document.getElementById('div3').className = 'movimento3_al_contrario';
            }
            var pag1 = 0;
      }
    function transizione2(){
      	document.getElementById('div2').className = 'movimento2';    
            if(pag1 == 0){
            document.getElementById('div1').className = 'movimento1_al_contrario';
            }
            if(pag3 == 0){
            document.getElementById('div3').className = 'movimento3_al_contrario';
            }
            var pag2 = 0;
      }
    function transizione3(){
      	document.getElementById('div3').className = 'movimento3';
            if(pag1 == 0){
            document.getElementById('div1').className = 'movimento1_al_contrario';
            }
            if(pag3 == 0){
            document.getElementById('div2').className = 'movimento2_al_contrario';
            }
            var pag3 = 0;
      }
    ma cosi non funziona....qualche idea???

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.