[jQuery] Menù che carica la pagina in un DIV

[Cadmir]

Salve a tutti,
sto creando un sito e per ora sto ancora creando la struttura del forum. Ora però sono arrivato ad un dilemma. Far ricaricare l'intera pagina ad un utente, oppure far funzionare un DIV come iFrame?
Per ora avrei scelto la seconda, cercando di constatare la difficoltà. Premetto che di Javascript non so quasi nulla, ma da qualche parte si dovrà anche iniziare no?
Vi inserisco il codice del menù ed il relativo CSS:

/* -------------------------- */
/* ---------- MENU ---------- */
/* -------------------------- */

.contenitoremenu {
	margin:auto;
	width:864px;
	text-align:center;
	margin-top:20px;
	margin-bottom:20px;
}

.menu {
	background-image:url('image/navigation.png');
	background-repeat:repeat-x;
	display:inline-block;
	border:1px #222222 solid;
	height:33px;
	text-align:center;
	text-transform:uppercase;
	font-family:"Courier New", Courier, monospace;
	font-size:12px;
	color:#888;
	line-height:33px;
	padding-left:10px;
	padding-right:10px;
	margin:0px 8px;
	border:1px #222222 solid;
}

		
<div class="contenitoremenu">
	<div class="menu">PAGINA 1</div> 
	<div class="menu">PAGINA 2</div>
	<div class="menu">PAGINA 3</div>
	<div class="menu">PAGINA 4</div>
	<div class="menu">PAGINA 5</div>
	<div class="menu">PAGINA 6</div>
	<div class="menu">PAGINA 7</div>
	<div class="menu">PAGINA 8</div>
	<div class="menu">PAGINA 9</div>
</div>

Bene, cliccando ad esempio sul "pulsante" PAGINA 1 dovrebbe caricare in un div sottostante che chiameremo PIPPO una pagina html (o PHP) ad esempio pagina_1.html (oppure pagina_1.html.php, ma credo che l'estensione della pagina da caricare non cambi il codice).

Su internet ho letto che questa azione è prevista dalla funzione load() ma, degli esempi trovati in rete, non ci ho capito niente o quasi poichè molti danno per scontato che tutti sappiano usare il javascript
Potete aiutarmi?
Grazie mille a chi vorrà aiutarmi

[Cadmir]

Originariamente inviato da F@bius
$(document).ready(function () {

$("#pagina1").click(function () {

$.get("pagina_da_caricare.html", function(dati) {

$("#div_sottostante").html(dati);

});

});

});

Ciao.

Alla faccia della "concisivista"
Comunque ho fatto un po' di prove (inserendolo tra i tag script e mettendolo nel body e modificando i vari nomi/id/class) ma non riesco
Potresti spiegarmi come e dove metterlo? Inoltre nell'head devo caricare qualche libreria jQuery?

[Cadmir]

Originariamente inviato da F@bius
Nel body:

<div class="contenitoremenu">
<div class="menu">PAGINA 1</div>
<div class="menu">PAGINA 2</div>
<div class="menu">PAGINA 3</div>
<div class="menu">PAGINA 4</div>
<div class="menu">PAGINA 5</div>
<div class="menu">PAGINA 6</div>
<div class="menu">PAGINA 7</div>
<div class="menu">PAGINA 8</div>
<div class="menu">PAGINA 9</div>
</div>
<div id="div_sottostante"></div>

Prima della chiusura del tag head, sotto la libreria principale di jQuery,
scrivi:

<script type="text/javascript">

// codice che ti ho scritto //

</script>

Wow perfetto! Ce l'ho fatta! Ti ringrazio moltissimo!
Ora una curiosità, per far si che tutti i link mi portino a diverse pagine, caricate sullo stesso DIV, basta che copio il codice (cambiando i puntamenti e gli id ovviamente) oppure c'è un modo più "ordinato"?
Comunque ti ringrazio moltissimo!

PS: L'ho provata su IE e funziona benissimo, ma su FIREFOX non va cosa ci sarebbe da cambiare? Ho abilitato il javascript su firefox, ogni voce, ma nulla

PPS: Come non detto. Caricando il sito su WAMP tutto va per il meglio, ma come mai che IE mi funziona anche in "locale"?

[Cadmir]

Inoltre volevo sapere come si puo' caricare in automatico la pagina1 all'apertura del sito (sempre nel solito DIV). Grazie

[Cadmir]

Grazie mille bello! Mi sei stato di grandissimo aiuto!
Grazie ancora!

Ciao!