nascondi / rivela

**nextart** · 20-12-2009, 12:07

ciao a tutti, avrei la necessità di nascondere parte della tabella al click sulla voce relativa.

mi spiego, ho:

codice:

<div class="tab_menu">
<table> 
<tr>
<td>RADIOLOGIA</td>
<td>OSTETRICIA/GYN</td>
<td>CARDIOLOGIA</td>
<td>ANESTESIA/RIANIMAZIONE</td>
<td>VASCOLARE</td>
<td>PEDIATRIA</td>
</tr>
<tr>
<td>[img]images_prodotti/01.jpg[/img]</td>
<td>[img]images_prodotti/02.jpg[/img]</td>
<td>[img]images_prodotti/03.jpg[/img]</td>
<td>[img]images_prodotti/04.jpg[/img]</td>
<td>[img]images_prodotti/05.jpg[/img]</td>
<td>[img]images_prodotti/06.jpg[/img]</td>
</tr>
</table>
</div>

Cliccando sull'immagine radiologia, mostro i prodotti relativi ma il cliente mi chiese se sia possibile nascondere le altre categorie?

grazie a tutti

ciao

**dragon88** · 20-12-2009, 12:28

Presumo che tutto ciò che devi nascondere si trovi nella seconda riga, se è cosi allora metti in tutti i td, nella seconda riga, l'attributo id ( tutti i td devono avere lo stesso valore nell'attributo id ) e poi nascondili al caricamento della pagina con questo codice javascript:

codice:

 
<script type="text/javascript">
  window.onload = function() {
     document.getElementById(valore_id).style.display = "none";
  }
</script>

Mentre per visualizzare un td, imposta ad oggi td l'attributo class, ognuno con valore diverso e mediante l'evento onclick sull'immagine, scrivendo questa funzione:

codice:

 
<script type="text/javascript">
  function view(element) {
     document.getElementById(valore_id).style.display = "none";
     document.getElementByClass(valore_class).style.display = "block";
  }
</script>

L'ultima funzione, prima di visualizzare l'elemento che desideri li chiudi tutti permettendo ti tenere aperto solo l'elemento che ti interessa

**nextart** · 20-12-2009, 13:27

ciao dragon88, grazie per la risposta....forse mi sono spiegato male..

ti giro il link cosi' puoi farti un'idea:

prodotti

cliccando ad esempio su Radiologia, le altre voci ed immagini dovrebbero nascondersi.... :-)

tnx

**cavicchiandrea** · 20-12-2009, 13:40

Cosi funziona:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Esercizio</title>
<script type="text/javascript">
<!-- 
function Mostra(rep){
var reparti = document.getElementById('tr_reparti').getElementsByTagName('td')
for(var i=0; i<reparti.length; i++){
//alert(reparti[i].style.display)
if(rep == i){
reparti[i].style.display='block';
}else if(reparti[i].style.display == 'block'){reparti[i].style.display='none';}
}}

-->
</script>
<style type="text/css">
.Nascosto{display:none;}
.tr_reparti{width:200px;}
</style>
</head>  
<body>
<table > 
<tr id="tr_reparti" class="tr_reparti">
<td class="Nascosto">RADIOLOGIA</td>
<td class="Nascosto">OSTETRICIA/GYN</td>
<td class="Nascosto">CARDIOLOGIA</td>
<td class="Nascosto">ANESTESIA/RIANIMAZIONE</td>
<td class="Nascosto">VASCOLARE</td>
<td class="Nascosto">PEDIATRIA</td>
</tr>
</table>
<table>
<tr class="tr_reparti" >
<td>Radi</td>
<td>Oste</td>
<td>Card</td>
<td>Anst</td>
<td>Vasc</td>
<td>Pedi</td>
</tr>
</table>
</body>
</html>

Io avevo capito che volevi nascondere le righe sopra l'immagini, comunque il concetto non cambia.

**nextart** · 20-12-2009, 13:51

ciao ho messo cio' mi hai detto:

codice:

<div class="tab_menu">
<table> 
<tr id="tr_reparti" class="tr_reparti">
<td class="Nascosto">RADIOLOGIA</td>
<td class="Nascosto">OSTETRICIA/GYN</td>
<td class="Nascosto">CARDIOLOGIA</td>
<td class="Nascosto">ANESTESIA/RIANIMAZIONE</td>
<td class="Nascosto">VASCOLARE</td>
<td class="Nascosto">PEDIATRIA</td>
</tr>

<tr class="tr_reparti" >
<td>[img]images_prodotti/01.jpg[/img]</td>
<td>[img]images_prodotti/02.jpg[/img]</td>
<td>[img]images_prodotti/03.jpg[/img]</td>
<td>[img]images_prodotti/04.jpg[/img]</td>
<td>[img]images_prodotti/05.jpg[/img]</td>
<td>[img]images_prodotti/06.jpg[/img]</td>
</tr>
</table>
</div>

ma cosi' sparisocno le scritte all'onload, ma voglio che siano visibili all'onload.
e poi se clicco sull'imamgine di radiologia ad esempio non mi scompaiono le altre !?!?!?!

**cavicchiandrea** · 20-12-2009, 14:36

Come t'ho già detto avevo capito diversamente (forse anche dovuto dalla richiesta) pertanto non è un copia/incolla ma un esempio da adattare alle tue esigenze.

**dragon88** · 20-12-2009, 16:54

Credo che questo esempio faccia ciò che desideri:

codice:

<script type="text/javascript">
  window.onload = function()
  {
     document.getElementById("prima").style.display = "none";
     document.getElementById("seconda").style.display = "none";
     document.getElementById("tersa").style.display = "none";
  }
  function mostra(scheda)
  {
	 // nascondo tutti i td della seconda riga
         document.getElementById("prima").style.display = "none";
	 document.getElementById("seconda").style.display = "none";
	 document.getElementById("tersa").style.display = "none";
	 
	 // mostra il td che interessa all'utente se è nascosto, altrimenti lo nasconde
         if (document.getElementById(scheda).style.display == "none) {
	    document.getElementById(scheda).style.display = "block";
         }else {
            document.getElementById(scheda).style.display = "none";
         }
  }
</script>
<table width="343">
 <tr>
   <td width="113">Prima scheda</td>
   <td width="109">Seconda scheda</td>
   <td width="105">Tersa scheda</td>
 </tr>
 <tr>
   <td colspan="3" id="prima">Contenuto prima scheda</td>
   <td colspan="3" id="seconda">Contenuto seconda scheda</td>
   <td colspan="3" id="tersa">Contenuto tersa scheda</td>
 </tr>
</table>

Clicca sul nome della scheda ( prima scheda, seconda scheda o tersa scheda ), da quello che ho notato il mio esempio svolge le stesse operazione del link che mi hai postato

Discussione: nascondi / rivela

Strumenti discussione

Ricerca discussione

Visualizza

nascondi / rivela

Permessi di invio