Visualizzazione risultati 1 fino 9 di 9

Discussione: Div Nascondi/Mostra

  1. #1
    Guest

    Predefinito Div Nascondi/Mostra

    Salve a tutti,

    Mi sorge un problemino che pensavo di risolvere cercando qui nel forum, ma sfortunatamente non ho trovato nulla nei post precedentemente già aperti, o magari cercavo io in modo errato. Comunque sia vi espongo il mio problema, vorrei appunto usare la funzione div per nascondere e poi mostrare al click del mouse ma non riesco a trovare una guida per il codice.

    In pratica vorrei creare un menù a sinistra della pagina, e poi una volta cliccato in un bottone, si visualizzerà il testo al centro della pagina, e una volta cliccato in un altro bottone scomparirà quel testo comparendone un altro e così via.

    Sapreste darmi una mano?
    O magari potete postarmi una guida che faccia a caso mio?

    Grazie ancora Alessio.

  2. #2
    Guest

    Predefinito

    devi usare javascript e non php se non mi sbaglio

    ciao

  3. #3
    Guest

    Predefinito

    Codice HTML:
    <script type="text/javascript">
    function view(id) {
        document.getElementById(id).style.display='block';
    }
    function hidden(id) {
        document.getElementById(id).style.display='none';
    }
    </script>
    <a id="link" href="javascript:view('nasc');view('link2')" onclick="hidden('link')">Visualizza</a>
    <a id="link2" style="display: none" href="javascript:hidden('nasc');hidden('link2')" onclick="view('link')">Nascondi</a>
    <span id="nasc" style="display: none">Testo nascosto</span>
    Ultima modifica di gabryhacker : 01-01-2009 alle ore 13.18.39 Motivo: svista nel codice

  4. #4
    Guest

    Predefinito

    Citazione Originalmente inviato da gabryhacker Visualizza messaggio
    Codice HTML:
    <script type="text/javascript">
    function view(id) {
        document.getElementById(id).style.display='block';
    }
    function hidden(id) {
        document.getElementById(id).style.display='none';
    }
    </script>
    <a id="link" href="javascript:view('nasc');view('link2')" onclick="hidden('link')">Visualizza</a>
    <a id="link2" style="display: none" href="javascript:hidden('nasc');hidden('link2')" onclick="view('link')">Nascondi</a>
    <span id="nasc" style="display: none">Testo nascosto</span>
    Innanzitutto grazier per avermi risposto, e aguri di buon anno.
    Volevo però chiederti se io volessi una struttura più complicata nel senso io ho più pulsanti

    Mostra
    Contatti
    Foto

    Schiaccio su mostra e al centro della pagina mi compare il testo, poi schiaccio su contatti e mi compare un altro testo e nel frattempo ha oscurato gli altri due div, quale sarebbe il codice in questo caso? Perchè io chiedevo appunto questo.

    Grazie ancora per le eventuali risposte, buon anno Alessio.

  5. #5
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    ciao!

    Al posto di "testo nascosto" puoi metterci i comandi: (ESEMPINO)

    Codice HTML:
    <a id="link" href="javascript:view('nasc');view('link2')" onclick="hidden('link')">Visualizza</a>
    <a id="link2" style="display: none" href="javascript:hidden('nasc');hidden('link2')" onclick="view('link')">Nascondi</a>
    <span id="nasc" style="display: none"><input type="button" value="vai!" onClick="window.navigate('http://alemoppo.altervista.org');" ><input type="button" value="contatti">
    no?

    ciao!
    Ultima modifica di alemoppo : 02-01-2009 alle ore 00.15.11

  6. #6
    Guest

    Predefinito

    Citazione Originalmente inviato da alemoppo Visualizza messaggio
    ciao!

    Al posto di "testo nascosto" puoi metterci i comandi: (ESEMPINO)

    Codice HTML:
    <a id="link" href="javascript:view('nasc');view('link2')" onclick="hidden('link')">Visualizza</a>
    <a id="link2" style="display: none" href="javascript:hidden('nasc');hidden('link2')" onclick="view('link')">Nascondi</a>
    <span id="nasc" style="display: none"><input type="button" value="vai!" onClick="window.navigate('http://alemoppo.altervista.org');" ><input type="button" value="contatti">
    no?

    ciao!
    Ciao, scusami forse ci siamo fraintesi.

    Non voglio che il mio menù o bottoni siano nascosti. Io volevo fare che nella mia homepage a sinistra vi era il menù al centro della pagina nulla, perchè appunto i div sono nascosti una volta che però schiaccio su un bottone del mio menù allora renderà visibile il div ma nel frattempo gli altri div restono oscurati, poi appena schiaccio un altro bottone del mio menù allora renderà visibile un altro div e oscurerà gli altri div in modo che scompare il contenuto che c'era precedentemente al centro della pagina e ne compaia uno nuovo. Spero di essere stato abbastanza chiaro, vorrei tanto postare un esempio ma attualmente non ne trovo.
    --------------
    Sono riuscito a trovare un esempio :

    http://www.land-dominia.it/index.php

    In questo sito potete notare che schiacciando nei vari tasti del menù si modifica solo il contenuto nella parte centrale, vorrei ottenere questo risultato nel mio sito.
    Grazie ancora per la vostra pazienza Alessio.
    Ultima modifica di wosgdrcd : 02-01-2009 alle ore 00.39.34

  7. #7
    Guest

    Predefinito

    Allora scrivi questo tra i tag <head> della tua pagina:

    Codice HTML:
    <script type="text/javascript">
    function showHide(id)
    {
     if (id.style.display != 'block')
     id.style.display = 'block';
     else
     id.style.display = 'none';
    }
    </script>
    Poi, nel <body> il link per mostrare/nascondere oggetto:
    Codice HTML:
    <a href="#" onClick="javascript:showHide(ID);">Visualizza</a>
    <div id="ID" style="display:none">CONTENUTO</div>
    Al posto del link puoi mettere anche una immagine o quello che preferisci, l'importante è che ci sia questa dicitura:

    Codice HTML:
    onClick="javascript:showHide(ID);"
    Dove ID sta per l'id dell'oggetto da mostrare nascondere

  8. #8
    Guest

    Predefinito

    Citazione Originalmente inviato da jcdesign Visualizza messaggio
    Allora scrivi questo tra i tag <head> della tua pagina:

    Codice HTML:
    <script type="text/javascript">
    function showHide(id)
    {
     if (id.style.display != 'block')
     id.style.display = 'block';
     else
     id.style.display = 'none';
    }
    </script>
    Poi, nel <body> il link per mostrare/nascondere oggetto:
    Codice HTML:
    <a href="#" onClick="javascript:showHide(ID);">Visualizza</a>
    <div id="ID" style="display:none">CONTENUTO</div>
    Al posto del link puoi mettere anche una immagine o quello che preferisci, l'importante è che ci sia questa dicitura:

    Codice HTML:
    onClick="javascript:showHide(ID);"
    Dove ID sta per l'id dell'oggetto da mostrare nascondere
    Grazie tante per il codice, solo che con quel codice i div si accavallano.
    Ho un pò cercato sul forum ed ho trovato una discussione in cui si parlava appunto di questo ho cercato di tirare giu un codice ma non funziona mi date na mano?

    Codice:
    <script type="text/javascript">
    function ShowAndHide(id1){
    if(document.getElementById){
        var mostra = document.getElementById('mostra');
        var commenti = document.getElementById('commenti');
        var eseguito = document.getElementById('eseguito');
        if(id1=="mostra"){
            mostra.style.display="block";
            commenti.style.display="none";
            eseguito.style.display="none";
            }
        else if(id1=="commenti"){
            mostra.style.display="none";
            commenti.style.display="block";
            eseguito.style.display="none";
            }
        else if(id1=="eseguito"){
            mostra.style.display="none";
            commenti.style.display="none";
            eseguito.style.display="block";
            }
        }
    }
    </script>
    
    <a href="#" onClick="showandHide(mostra);">Mostra</a>
    <div id="mostra" style="display:none">CONTENUTO</div>
    
    <a href="#" onClick="showandHide(eseguito);">Eseguito</a>
    <div id="eseguito" style="display:none">proviamo</div>
    
    <a href="#" onClick="showandHide(Commenti);">Commenti</a>
    <div id="Commenti" style="display:none">funziona?</div>
    Grazie ancora per le eventuali risposte Alessio.

  9. #9
    Guest

    Predefinito

    Quanto codice.., potresti usare jquery in versione minima ed usare le sue funzione per nascondere e visualizzare menù (magari riesci a fare qualcosa di più carino).

    Ciao

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •