aituo onclick display:none/block

**mrsir** · 14-08-2009, 15:42

Salve a tutti, ho cercato sul forum una possibile soluzione al mio problema, ma non sono riuscito a tirar fuori niente, è una richiesta credo molto frequente. Ho cercato anche su internet, ma non sono riuscito a far funzionare nulla

Io vorrei semplicemente un metodo, che al click di un link, un altro div venisse sostituito con un altro.

Es.

<div id="lastwork"> </div> (div di default al caricamento pagina)

link 1 --- click ---> sostituisci div "lastwork" con div "Quello che sarà"
link 2 ---- click ---> sostituisci div "quello che sarà" con div "ciaociascimmietta"
----------------cioe qualcosa che mostrasse e nascondesse i div a seconda del link cliccato.
Non voglio cambiare l'id del div, ma proprio nasconderlo e mostrarne un altro al suo posto, con stesse dimensioni, ma con altri contenuti.

Grazie in anticipo.

**marco.carrieri** · 14-08-2009, 21:05

Prova con il codice che ti metto,dopo lo potrai sempre modificare come meglio vorrai.

Codice PHP:


<html>

    <head>

    <title>prova</title>

    <script type='text/javascript'>

        function cambiadiv(iddiv)

        {

            document.getElementById("principale").innerHTML=document.getElementById(iddiv).innerHTML;

        }

    </script>

    </head>

    <body>

        <div id="principale" style="padding:10px;width:200px;border:2px solid red">testo</div>        

        
        

        [url="#"]DIV 1[/url]

        [url="#"]DIV 2[/url]

        [url="#"]DIV 3[/url]        

        


        


        
        

        <div id="id1" style="margin-right:20px;float:left;padding:10px;width:200px;border:2px solid green">aaaaaaaaa</div>

        <div id="id2" style="margin-right:20px;float:left;padding:10px;width:200px;border:2px solid blue">bbbbbbb</div>

        <div id="id3" style="margin-right:20px;float:left;padding:10px;width:200px;border:2px solid black">ccccccc</div>        

    </body>

</html>

**mrsir** · 16-08-2009, 14:11

Ti ringrazio vivamente, appena posso lo provo e ti faccio sapere. Grazie ancora.

**nevarim** · 16-08-2009, 20:52

se ti servev io ho fatto questa diverso tempo fa che è abastanza carina

function OClick(menu,img,pathimgespansa,pathimgcontratta)
{
stileimg=document.getElementById(img);
stilemenu=document.getElementById(menu).style;
if (stilemenu.display=="block")
{
stilemenu.display = "none"
stileimg.src=pathimgespansa;
}
else
{
stilemenu.display = "block"
stileimg.src=pathimgcontratta;
}
}
function OClicklink(divdaespandere)
{
stilemenu=document.getElementById(divdaespandere). style;
if (stilemenu.display=="block")
{
stilemenu.display = "none"
}
else
{
stilemenu.display = "block"
}
}

che ti permette di cambiare anche l'immagine

**mrsir** · 16-08-2009, 21:23

Wow ti ringrazio.. Grandi come sempre

**mrsir** · 17-08-2009, 10:21

Originariamente inviato da marco.carrieri
Prova con il codice che ti metto,dopo lo potrai sempre modificare come meglio vorrai.

Codice PHP:


<html>

    <head>

    <title>prova</title>

    <script type='text/javascript'>

        function cambiadiv(iddiv)

        {

            document.getElementById("principale").innerHTML=document.getElementById(iddiv).innerHTML;

        }

    </script>

    </head>

    <body>

        <div id="principale" style="padding:10px;width:200px;border:2px solid red">testo</div>        

        
        

        [url="#"]DIV 1[/url]

        [url="#"]DIV 2[/url]

        [url="#"]DIV 3[/url]        

        


        


        
        

        <div id="id1" style="margin-right:20px;float:left;padding:10px;width:200px;border:2px solid green">aaaaaaaaa</div>

        <div id="id2" style="margin-right:20px;float:left;padding:10px;width:200px;border:2px solid blue">bbbbbbb</div>

        <div id="id3" style="margin-right:20px;float:left;padding:10px;width:200px;border:2px solid black">ccccccc</div>        

    </body>

</html>

Grazie, funziona tutto bene. L'unico problema è che siccome gli elementi in questione non sono in cima alla pagina ma verso il basso, ogni volta che clicco i link la pagina torna in cima. Basta che levo il link e metto l'onclick su uno span?

**marco.carrieri** · 17-08-2009, 11:28

Beh la funzione onclick la puoi applicare anche a uno span,magari modifca lo span in questione con una classe cosi cambia anche il cursore quando sei sopra.

**mrsir** · 17-08-2009, 11:54

si infatti ho fatto così, grazie ancora!

Discussione: aituo onclick display:none/block

Strumenti discussione

Ricerca discussione

Visualizza

aituo onclick display:none/block

Permessi di invio