Aprire il contenuto di un link in un DIV

[tps]

Ciao ragazzi, sono nuovo di qui, un saluto a tutti :beer:

Stavo cercando un modo per aprire il contenuto di un link (link di un menu) in un div senza far caricare la pagina. Ho trovato una discussione simile qui che parlava del seguente metodo in javascript:

<script type="text/javascript">
function SimulaLink(ID)
{
var i = 1;
for (i=1; i<4; i++) // 
{
document.getElementById("contenuto_" + i).style.display = "none";
document.getElementById("contenuto_" + i).style.position = "absolute";
if (i == ID)
{
document.getElementById("contenuto_" + ID).style.display = "block";
document.getElementById("contenuto_" + ID).style.position = "relative";
}
}
}
</script>

Questo funziona alla perfezione, soltanto che avendo 13 link nel menu, dovrei modificare quel codice in:

var i = 1;
for (i=1; i<14; i++)

Il problema è che non mi visualizza il contenuto dei link dal link 10 in poi. Dovrei fare modifiche interne al codice per farmeli visualizzare?

Grazie a tutti :fonzie:

 

[alessandro1997]

Il codice che hai postato non c'entra niente con il caricamento di una pagina senza aggiornare (cosa che va realizzata tramite AJAX). Non fa altro che modificare degli stili CSS, mostrando l'elemento con ID specificato e nascondendo tutti gli altri.

 

[tps]

Si, capisco che sarebbe opportuno farlo in Ajax, ma per il momento questo metodo mi va bene: nascondendo ed aprendo nel div di destra, i contenuti dei link del div di sinistra con il semplice click.

Però come ho detto il mio problema è che non mi visualizza i contenuti dei link dal 10 al 13

 

[criric]

Ciao,
probabilmente sbagli ad assegnare l'id ai div
a me funziona

<style>
    p {
        display: none;
    }
</style>
<script type="text/javascript">
    function SimulaLink(ID)
    {
        var i = 1;
        for (i=1; i<14; i++) // 
        {
            document.getElementById("contenuto_" + i).style.display = "none";
            document.getElementById("contenuto_" + i).style.position = "absolute";
            if (i == ID)
            {
                document.getElementById("contenuto_" + ID).style.display = "block";
                document.getElementById("contenuto_" + ID).style.position = "relative";
            }
        }
    }
</script>
<a href="#" onclick="SimulaLink(1);return false;">link 1</a>
<a href="#" onclick="SimulaLink(2);return false;">link 2</a>
<a href="#" onclick="SimulaLink(3);return false;">link 3</a>
<a href="#" onclick="SimulaLink(4);return false;">link 4</a>
<a href="#" onclick="SimulaLink(5);return false;">link 5</a>
<a href="#" onclick="SimulaLink(6);return false;">link 6</a>
<a href="#" onclick="SimulaLink(7);return false;">link 7</a>
<a href="#" onclick="SimulaLink(8);return false;">link 8</a>
<a href="#" onclick="SimulaLink(9);return false;">link 9</a>
<a href="#" onclick="SimulaLink(10);return false;">link 10</a>
<a href="#" onclick="SimulaLink(11);return false;">link 11</a>
<a href="#" onclick="SimulaLink(12);return false;">link 12</a>
<a href="#" onclick="SimulaLink(13);return false;">link 13</a>
<p id="contenuto_1">contenuto 1</p>
<p id="contenuto_2">contenuto 2</p>
<p id="contenuto_3">contenuto 3</p>
<p id="contenuto_4">contenuto 4</p>
<p id="contenuto_5">contenuto 5</p>
<p id="contenuto_6">contenuto 6</p>
<p id="contenuto_7">contenuto 7</p>
<p id="contenuto_8">contenuto 8</p>
<p id="contenuto_9">contenuto 9</p>
<p id="contenuto_10">contenuto 10</p>
<p id="contenuto_11">contenuto 11</p>
<p id="contenuto_12">contenuto 12</p>
<p id="contenuto_13">contenuto 13</p>