Seiten verlinken

[kathi04]

Hallo, ich versuche gerade eine Website zuerstellen:

Mein Problem:

Ich möchte, wenn man in den NAV-Bereichen einen Button anklickt soll im Content-Bereich der Inhalt erscheinen.
Die Inhalten zu den Buttons werden in eigenen Seiten geschrieben.

so sieht das Layout aus:

Sämtliche Formatierungen zum layout wurden in einer CSS geschrieben. (KEINE Frames!!)

Ich hoffe, dass ihr mein Problem versteht und, dass mir jemand helfen kann??!

Danke schon mal im voraus!

LG.

 

[Supercomputer]

Ajax sollte die Lösung sein, bist dann aber auf Javascript angewiesen

 

[kathi04]

Ajax sagt mir soweit nichts. Javascript sollte kein Problem sein.

 

[Supercomputer]

Ajax ist eine Art zwischen Schicht in der Server Client Verbindung.
Wenn du danach Googlest, solltest du recht schnell damit klar kommen

 

[NE4Y]

Alternativ ein lfi System in php


Gesendet von meinem iPhone mit Tapatalk

 

[hannover96xd]

Schaue dir mal die load Anweisung von Ajax an.

.load()
http://api.jquery.com/load/

Edit:
Scheibe von der. load() Funktion eine Anweisung zum ausblenden und dannach eine zum wieder einblenden

 

[kathi04]

Danke für die schnellen Antworten. Ich hab es mit AJAX versucht, bin jetzt aber total verwirrt.
Kann mir vielleicht jemand einen ajax-code für mein problem schicken???

Wäre sehr nett! - DANKE!

 

[Infomercial]

ein bisschen umständlicher, dafür aber ohne javascript, wäre es, wenn du die navigation auf jede einzelne seite kopierst, sofern das dein konzept hergibt.

der nachteil ist halt, dass du eine änderung in der navigation dann auf jeder einzelnen seite vornehmen musst.

 

[hannover96xd]

ein bisschen umständlicher, dafür aber ohne javascript, wäre es, wenn du die navigation auf jede einzelne seite kopierst, sofern das dein konzept hergibt.
der nachteil ist halt, dass du eine änderung in der navigation dann auf jeder einzelnen seite vornehmen musst.

Dafür kann man dann PHP und die include Funktion nutzen.

<?php
include "nav.php";
?>

Vorraussetzung ist, dass du mit einem Webserver arbeitest. XAMPP wäre für Windows eine Variante.

Zu Ajax:
Du kannst mit sagen, dass wenn auf einen Bereich der Website mit z. B. der ID "link" gedrückt wird, dass dann ein anderer Bereich der Website (in dem Fall ein Bereich mit der ID wrapper) ausgeblendet werden soll. Für das ausblenden manipuliert man dann die CSS Eigenschaften des Seitenbereiches mit der ID wrapper. Die filter Funktion ist nur für den IE, da der den opacity Formatierungsbefehl nicht versteht. Die Zahl 300 steht für die Dauer der Ausblendung in ms (millisekunden).

$("#link").click(function() {
    $("#wrapper").animate({opacity:"0", filter:"alpha(opacity=0)"}, 300, function() {

Nun sagen wir, dass er in den wrapper die Datei includePage.html laden soll. Hier kommt ajax mit der .load() Funktion ins Spiel.

$("#wrapper").load("includePage.html", function() {

Damit der wrapper Bereich wieder zu sehen ist, müssen wir ihn sichtbar machen.

$("#wrapper").animate({opacity:"1", filter:"alpha(opacity=100)"}, 300);

Und noch die Klammern schließen.

});
});
});

Der Komplette Code:

    $("#link").click(function() {
        $("#wrapper").animate({opacity:"0", filter:"alpha(opacity=0)"}, 300, function() {
            $("#wrapper").load("includePage.html", function() {
                $("#wrapper").animate({opacity:"1", filter:"alpha(opacity=100)"}, 300);          
            });
        });
    });

Der HTML Code könnte so aussehen:

<a href="#/includePage.html" id="link">IncludePage</a>

....

<div id="wrapper">Inhalt, der ausgeblendet und durch den aus der Datei: includePage.html ersetzt wird</div>

In der eingebundenen Datei muss kein Doytype tag etc. mehr stehen. Nur der Inhalt mit den HTML-Elementen, wie <p> oder <h1>.
Dies ist eine sehr einfache Variante und wird zu kompliziert, wenn es zu komplex wird. Für den Einstieg ist sie jedoch gut.