divbox Inhalt per Link ändern

Anevay

Hi,

ich habe folgende Frage:

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

Hier einmal meine Seite:

http://apenimon.org/

Herzliche Grüße

Anevay

Arne Drews

Hallo,

Ich würde sagen, Du suchst XmlHttpRequests ( Ajax ).

Anevay

Danke,

könntest du evtl noch etwas genauer werden?

Das würde mir einiges an Zeit schenken

Liebe Grüße

Anevay

Arne Drews

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

djheke

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.

Arne Drews

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.

Anevay

Hi,

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

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

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="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

djheke

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?

Arne Drews

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

PHP

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;


        }


    }


}




{ // <-- was soll diese Klammer?
xmlHttpObject.open('get','hallo.txt');
xmlHttpObject.onreadystatechange = handleContent;
xmlHttpObject.send(null);
return false;
} // <-- ...und diese?




function handleContent() {


    if (xmlHttpObject.readyState == 4) {


      document.getElementById('main').innerHTML = xmlHttpObject.responseText;


    }


}

Alles anzeigen