Auf wunsch von Mythen gibts ein kleines Tutorial wie man Webseiten mit Dynamischem Inhalt mit hilfe von Hashtags realisiert.

[messagebox=info]Dies ist nur eine von viele möglichkeiten das zu machen.[/messagebox]

Für alle die Nicht wissen worum es hierbei geht:
Gemeint ist einfach, das die Seite nicht über url's wie z.b www.meine-domain.de/index.html, www.meine-domain.de/projekte.html und www.meine-domain.de/kontakt.html erreichbar ist, sondern über www.meine-domain.de#start, www.meine-domain.de#projekte, www.meine-domain.de#kontakt und sich dabei der Inhalt Dynamisch ändert ohne die Seite neu zu laden. Wer jetzt immernoch nicht weiss was ich meine, schaut euch z.b Twitter an, meine Homepage oder die Seite an der ich gerade arbeite an (Ein bisschen Werbung in eigener Sache muss ja auch mal sein :D).

Also, als erstes gibt es da 3 Wichtige Dinge die wir bedenken müssen:

1. Die Seite muss auch erreichbar sein wenn Javascript im Browser deaktiviert ist.
   Ironischer weise geht das bei meinen Seiten nicht, weil ich dafür schlicht und ergreifend zu faul bin xD, und Twitter arbeitet auch nicht vernünftig ohne JS. Das soll euch aber nicht davon ab halten.
   
2. Der Jeweilige Content muss trotzdem über einen Direktlink erreichbar sein. Das heisst, wenn ich zur Kontaktseite möchte, will ich nicht erst auf der Startseite landen und mich dann durch klicken müssen, sondern ich will direkt über z.b www.meine-domain.de#kontakt dort hin gelangen.
   
3. Der Zurück Button muss funktionieren. Das heißt, wenn ich auf der Startseite bin, und dann auf die Kontaktseite wechsel, will ich über den Zurück Button auch wieder auf der Startseite landen.
   

Nun fangen wir erstmal mit dem HTML Grundgerüst an:

Wie ihr seht verzichte ich für dieses Tutorial auf großartige Style Sachen, da es mir hauptsächlich um den Inhalt geht. Im head bereich seht ihr erstmal das einbinden von jQuery direkt von deren Homepage. Danach das hashchange-plugin, welches ihr euch hier runterladen müsst. Und zu guter letzt noch unsere JS Datei.
Im body bereich sehen wir nur die Links zum wechseln der Seite, und den section-tag mit der id "main". Dies dient zur Identifizierung, da dort nachher der Inhalt der Seite rein kommt.

Nun gehts an unsere Javascript Datei. Wir erstellen eine neue js datei und nennen sie "dynamicpage.js". Dort kommt erstmal folgender inhallt rein:

Dort sehen wir erstmal nur das hashchange event, welches aufgerufen wird wenn sich der hash ändert. Nun holen wir uns den hash:

Jetzt sollten wir erstmal abfragen ob überhaupt ein hash angegeben wurde. Denn wenn ich z.b nur www.meine-domain.de aufrufe, ist ja noch kein hash gegeben. Ich möchte aber trotzdem dass dann eine Seite angezeigt wird, z.b die Startseite.
Also fragen wir ab ob der hash leer ist, und wenn ja setzen wir den hash auf "#startseite" und ändern die URL dementsprechend.

So, nun gehts ans laden der Seite.
Erstmal wandeln wir den hash in kleinbustaben um, damit #startseite das gleiche ist wie #StArTsEiTe oder #STARTSEITE.

Nun wird main erstmal versteckt, damit, falls vorher eine andere seite geladen wurde, nun platz für was neues ist. Natürlich muss das nicht umbedingt sein, aber es sieht schöner aus, und eventuell möchte der eine oder andere ja mit ein paar effekten arbeiten, wie z.b langsamen ausblenden der seite, oder dem hochscrollen.

Nu is die Seite weg, und wir machen uns ans laden der neuen Seite. Das ganze geht über die Funktion load.

Hier laden wir den Inhalt der Datei "beispiel.html" in unser #main element. Natürlich wollen wir nicht beispiel.html, sonern z.b startseite.html. Deshalb tragen wir dort unsere hash variable ein.
Über die funktion können wir dann prüfen ob es einen fehler gab, weil die Seite nicht existierte. Wenn z.b jemand aus langeweile "www.meine-domain.de#sadfasdfadf" eingegeben hat, wird ja versucht der Inhalt von sadfasdfadf.html zu laden. Da diese Datei nicht existiert, wird ein Fehler ausgegeben. So können wir z.b eine 404 Seite angeben o.ä.
Zusätlich haben wir nun aber auch das Problem, das wir nur html Datein laden würden, und ein großteil der Modernen webseiten html benötigt (für was auch immer). Auch da ist die error abfragen für uns von vorteil.
hash.html laden. Wenn Seite nicht gefunden -> hash.php laden. Wenn Seite nicht gefunden -> 404 Seite laden.
Natürlich könnten wir das auch mit Zahlreichen abfragen machen. Wenn hash == soundso, lade seite xyz. Aber ich habs gern sparsam und von natur aus faul, und muss so nicht jede Seite die neu dazu kommt nachtragen.
Nun kommt noch dazu, das es etwas unordentlich werden könnte wenn alle html datein um wurzelverzeichniss rum lungern, deshalb platzieren wir dort nur die index.html, und der rest kommt in /pages. Das müssen wir natürlich auch beim laden beachten.
Also sieht es nun folgendermaßen aus:

Nun ist der inhalt aus der Datei im #main element. Aber es ist immernoch ausgeblendet, also lassen wir es jetzt wieder anzeigen. Auch hier habt ihr wieder die möglichkeit, neben dem normalen show() die seite rein zu scrollen, oder langsam einfaden zu lassen.

Das hashchange event wird immer dann aufgerufen, wenn sich der hash ändert. Da das aber beim ersetn Seiten aufruf nicht der fall ist, müssen wir es deshalb noch selbst aufrufen. Dafür fügen wir, nach dem hashchange event, noch folgendes hinzu:

So, theoretisch sind wir jetzt fertig. Aber ich möchte noch ein Paar dinge dazu sagen die vielleicht dem ein oder anderen helfen:

• Warscheinlich möchtet ihr, das, wenn jemand auf einen Link im Menu geklickt hat, auch das Menu als "aktiv" angezeigt wird. Im idealfall habt ihr dafür eine CSS klasse, die ihr mithilfe von removeClass & addClass und eine each schleife bequem aktivieren könnt. Bei fragen dazu bitte als antwort Posten, da ich es schlecht erklären kann weil das ja bei jedem unterschiedlich gestaltet ist.
  
• Weiteres folgt, sobald jemand was fragt^^
  

Bitte gern
Wenn du auf Probleme stoßen solltest einfach hier fragen

Das Tutorial bezieht sich ja speziell, wie auch extra im Titel angegeben, auf die arbeit mit mit jQuery. Ich verstehe deine Argumentation zwar, aber es ist schließlich kein einsteiger Tutorial in die Welt von Javascript, weshalb ich nicht verstehe warum es ein Problem darstellt das ich hier damit arbeite.

Was willst du sonst damit sagen? Das man keine Tutorials mit jQuery veröffentlichen darf ohne nicht vorher eine gleichwertige alternative ohne Framework veröffentlicht zu haben?

Ich hab mich noch nie mit dem Prototype-Framework beschäftigt, deshalb leider nein.

In wie fern bist du denn auf Prototype angewiesen, das du nicht jQuery verwenden kannst?

Was für einen Browser verwendest du? So gut wie alle Modernen Browser besitzen eine Console die die meisten Javascript Fehler ausgeben sollte.
Bei Chrome ist es STRG+SHIFT+J , bei Firefox weis ich es leider nicht so genau.

Du kannst auch versuchen das Skript zu debuggen, indem du zwischendurch den hash per console.log ausgeben lässt. Also
Dann steht in der console der hash der geladen werden soll.
Ich nehme mal an das er bei dir die Seite nicht laden kann, das sollte aber dann wie gesagt in der Console stehen. Sieht dann ungefähr so aus: