Dynamisches nachladen von Inhalten

[seufZ]

Hallo liebe Forengemeinde,

in der PHP Section habe ich zwar diesen Code schon einmal gepostet,
mit einer anderen Fragestellung,
aber es geht mir nun hier darum, das was dieser Code macht in java-script
umzusetzen, da ich auf meiner Webseite beide Möglichkeiten anbieten
möchte! (Wenn scripte geblockt funzt eben das php!)

Wie sähe genau DAS in java-script aus?

wer kann mir bitte dabei helfen!

Grüsse seufZ

<?php 
    $sites = array(
        'punkt1' => './templates/menboxrechts/contentpages/seite1.php',
        'punkt2' => './templates/menboxrechts/contentpages/seite2.php',
        'punkt3' => './templates/menboxrechts/contentpages/seite3.php',
        'punkt4' => './templates/menboxrechts/contentpages/seite4.php',
        'punkt5' => './templates/menboxrechts/contentpages/seite5.php',
        'punkt6' => './templates/menboxrechts/contentpages/seite6.php',
        'punkt7' => './templates/menboxrechts/contentpages/seite7.php'
    );
    if(array_key_exists("dir", $_GET) && !empty($_GET['dir'])){
        $direction = $_GET['dir'];
        if (!array_key_exists($direction, $sites)){
            $direction = "punkt1";
            header('HTTP/1.0 404 Not Found');
        }
    } else {
        $direction = "punkt1";
    }
?>

<div id="content">
    <nav class="bild_menue">
        <ul>
               <li><a class="eins" href="?dir=punkt1">1</a></li>
                        <li><a class="zwei" href="?dir=punkt2">2</a></li>
                        <li><a class="drei" href="?dir=punkt3">3</a></li>
                        <li><a class="vier" href="?dir=punkt4">4</a></li>
                        <li><a class="fuenf" href="?dir=punkt5">5</a></li>
                        <li><a class="sechs" href="?dir=punkt6">6</a></li>
                        <li><a class="sieben" href="?dir=punkt7">7</a></li>            
        </ul> 
    </nav>
    <div class="fotobox">
                <?php
                          include_once('./'.$sites[$direction]);
                ?>

    </div>