divbox Inhalt per Link ändern

1. offizieller Beitrag
    • Offizieller Beitrag

    Dafür ist der Link da! Da bekommst Du das alles ausführlicher und besser erklärt, als das hier überhaupt möglich ist.

    Grundsätzlich ist ein XmlHttpRequest nichts weiter als eine Anfrage an den Server, dessen Antwort man verarbeitet.
    Für Deinen Fall würdest Du bei Klick auf ein Menüelement einen solchen Request durchführen, meinetwegen an die get_content.php mit dem Menüpunkt selber als Parameter.

    Die get_content.php sucht nun den entsprechenden Content zu diesem Menüpunkt und gibt diesen in Form einer Ausgabe zurück.
    Die Rückgabe verarbeitest Du, indem Du einfach das HTML innerhalb des DIV ersetzt.

    Details und Beispiele findest Du wie gesagt haufenweise, musst nur den Link klicken und lesen ;)

    Da wird er aber auf große Verständnisproble treffen. Er sollte mit Grundlagen in HTML/CSS anfangen. Das müsste für den Anfang ausreichend sein.

    • Offizieller Beitrag

    Nicht für die Anforderung des Threads:

    Zitat

    Wie kann ich per Klick eines Links, den Inhalt eines Div-Elements ändern, ohne dass sich die Seite komplett neulädt (verschiedene html Seiten)


    Es sei denn, Du willst alle Inhalte laden und die jeweils Ein- bzw. Ausblenden. Aber selbst dazu würde er JS benötigen, denke ich.

    Hi,

    also habe bereits einige Fortschritte gemacht jedoch hat sich anscheinend irgendwo ein fehler eingeschlichen.

    Hier mal der code an sich:
    <!DOCTYPE html>


    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8" />
    <link rel="stylesheet" href="layout.css">
    <title></title>
    </head>
    <body>


    <script type="text/javascript">


    var xmlHttpObject = false;


    if (typeof XMLHttpRequest != 'undefined')
    {
    xmlHttpObject = new XMLHttpRequest();
    }
    if (!xmlHttpObject)
    {
    try
    {
    xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
    try
    {
    xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e)
    {
    xmlHttpObject = null;
    }
    }
    }


    {
    xmlHttpObject.open('get','hallo.txt');
    xmlHttpObject.onreadystatechange = handleContent;
    xmlHttpObject.send(null);
    return false;
    }


    function handleContent()
    {
    if (xmlHttpObject.readyState == 4)
    {
    document.getElementById('main').innerHTML = xmlHttpObject.responseText;
    }
    }
    </script>


    <div id="container">


    <div id="main">
    <h1>Mockup Design 0.1</h1>


    </div>


    <div id="sidebar">
    <div id="button1">
    <a data-site="Startseite" href="">Startseite</a>
    </div>


    <div id="button2">
    <a data-site="AIYANA" href="" onclick="loadContent();">AIYANA</a>
    </div>


    <div id="button3">
    <a data-site="ANEVAY" href="">ANEVAY</a>
    </div>


    <div id="button4">
    <a data-site="Partner" href="">Partner</a>
    </div>


    <div id="button5">
    <a data-site="Unternehmen" href="">Unternehmen</a>
    </div>


    <div id="button6">
    <a data-site="Community" href="">Community</a>
    </div>


    <div id="button7">
    <a data-site="Registrieren" href="">Registrieren</a>
    </div>


    <div id="button8">
    <a data-site="Login" href="">Login</a>
    </div>


    </div>
    </div>


    <footer><a>Stand:07.09.2016</a></footer>


    </body>


    </html>

    ich bin schier am verzweifeln^^

    - - - Aktualisiert - - -

    Wie bereits erwähnt möchte ich mit Klick eines Links z.B. auf Unternehmen, dass sich im div main, der inhalt ändert bzw. sich die Unternehmen.html öffnet, dies ohne erneutes laden der kompletten Seite

    Also, Deine Beispaielseite hat ja nur den Inhalt und die "Navigation":). Meinst Du, dass die Seiten ohne Navigation schneller geladen werden? Selbst, wenn noch ein Header und Footer hinzukommt.
    Ich vermute mal, dass du Deine Navigation nur einmal einbinden und bearbeiten willst.
    Oder möchtest Du nur Lernen?

    2 Mal editiert, zuletzt von djheke (8. September 2016 um 19:05)

    • Offizieller Beitrag

    Formatiere bitte Deinen Code sauber ( ich habe mal PHP-Tags verwendet, wegen Syntax-Highlightning ), dann erkennt man auf den ersten Blick Kuriositäten: