Tabella????

**AnimeHeaveen** · 01-01-2014, 21.42.00

Ciao vorrei creare sul mio sito una tabella come questa
http://anidb.net/perl-bin/animedb.pl...nime&aid=10110
quella a sinistra dove cliccando su title o my data ect non si apre un altra pag ma semplicemente gira come posso fare?

01-01-2014, 21.55.51

Dipende dal tuo livello di conoscenza dei vari linguaggi, in questo caso servono CSS e javascript, io l'ho fatto nel mio sito usando le librerie JQuery, ma puoi farlo anche senza scomodare quest'ultimo, a te la decisione.

**alemoppo** · 01-01-2014, 22.00.08

Dove vedi il contenuto cambiare, hanno semplicemente posizionato più div nello stesso punto, e sono tutti nascosti tranne uno. Per nasconderli o mostrarli, hanno usato la proprietà css visibility.
Si può comunque fare in molti altri modi, ad esempio modificando le dimensioni, o la z-index. Oppure, si potrebbe mettere un solo div e cambiare il contenuto tramite javascript (comunque i modi più leggeri penso siano quelli con visibility o z-index).

EDIT: sorry, anticipato :D

Ciao!

**AnimeHeaveen** · 01-01-2014, 22.28.50

Originalmente inviato da alemoppo

Dove vedi il contenuto cambiare, hanno semplicemente posizionato più div nello stesso punto, e sono tutti nascosti tranne uno. Per nasconderli o mostrarli, hanno usato la proprietà css visibility.
Si può comunque fare in molti altri modi, ad esempio modificando le dimensioni, o la z-index. Oppure, si potrebbe mettere un solo div e cambiare il contenuto tramite javascript (comunque i modi più leggeri penso siano quelli con visibility o z-index).

EDIT: sorry, anticipato :D

Ciao!

Si grazie per avermi risposto ,volevo sapere come fare però per realizzarla se è una cosa complicata o no

**alemoppo** · 02-01-2014, 00.09.06

Come si fa tel'ho detto prima. Vale il discorso di australiafever.

Ciao!

**radiodelmomento** · 02-01-2014, 01.52.44

Per farti capire grossomodo la struttura ecco un abbozzo di codice...

Codice HTML:

<a href="javascript:Mostra(1)">Mostra 1</a> - <a href="javascript:Mostra(2)">Mostra 2</a> - <a href="javascript:Mostra(3)">Mostra 3</a>
<br />
<div id="Contenuto1">contenuto1</div>
<div id="Contenuto2">contenuto2</div>
<div id="Contenuto3">contenuto3</div>
<script>
$("#Contenuto2, #Contenuto3").hide();
function Mostra(id){
	$("#Contenuto1, #Contenuto2, #Contenuto3").hide();
	$("#Contenuto"+id).show();
}
</script>

Nel codice ho utilizzato jQuery, quindi per funzionare occorre includerlo.
Al design e all'ottimizzazione penserà il diretto interessato. Buon lavoro"

**AnimeHeaveen** · 02-01-2014, 18.02.05

Originalmente inviato da radiodelmomento

Per farti capire grossomodo la struttura ecco un abbozzo di codice...

Codice HTML:

<a href="javascript:Mostra(1)">Mostra 1</a> - <a href="javascript:Mostra(2)">Mostra 2</a> - <a href="javascript:Mostra(3)">Mostra 3</a>
<br />
<div id="Contenuto1">contenuto1</div>
<div id="Contenuto2">contenuto2</div>
<div id="Contenuto3">contenuto3</div>
<script>
$("#Contenuto2, #Contenuto3").hide();
function Mostra(id){
	$("#Contenuto1, #Contenuto2, #Contenuto3").hide();
	$("#Contenuto"+id).show();
}
</script>

Nel codice ho utilizzato jQuery, quindi per funzionare occorre includerlo.
Al design e all'ottimizzazione penserà il diretto interessato. Buon lavoro"

Grazie mille ho capito :))

**alemoppo** · 02-01-2014, 22.24.04

Lo stesso codice di radiodelmomento senza jquery:

Codice HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>prova</title>
<style type="text/css">
[id^=Contenuto]
{
	visibility: hidden;
	position: absolute;
	top: 30px;
	left: 10px;
}
</style>
</head>
<body>

<a href="javascript:Mostra(1)">Mostra 1</a> - <a href="javascript:Mostra(2)">Mostra 2</a> - <a href="javascript:Mostra(3)">Mostra 3</a>
<br />
<div id="Contenuto1">contenuto1</div>
<div id="Contenuto2">contenuto2</div>
<div id="Contenuto3">contenuto3</div>

<script type="text/javascript">
window.onload = function()
{
	document.getElementById('Contenuto1').style.visibility = 'visible';
}
function Mostra(id)
{
	var div;
	for(var i=1;div = document.getElementById('Contenuto'+i);i++)
		if(i == id)
			div.style.visibility = 'visible';
		else
			div.style.visibility = 'hidden';
}
</script>

</body>
</html>

Ciao!

Discussione: Tabella????

LinkBack

Strumenti discussione

Display

Tabella????

Regole di scrittura