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?
Printable View
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?
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.
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 noCitazione:
Originalmente inviato da alemoppo
Come si fa tel'ho detto prima. Vale il discorso di australiafever.
Ciao!
Per farti capire grossomodo la struttura ecco un abbozzo di codice... :wink:
Nel codice ho utilizzato jQuery, quindi per funzionare occorre includerlo.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>
Al design e all'ottimizzazione penserà il diretto interessato. Buon lavoro" :=D:
Grazie mille ho capito :))Citazione:
Originalmente inviato da radiodelmomento
Lo stesso codice di radiodelmomento senza jquery:
Ciao!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>