Website nur Inhalt soll wechseln und laden

Das ist doch nun wirklich kein Hexenwerk :rolleyes:

Ein bischen HTML und CSS, und fertig ist hier die Laube :)

HTML: 
<body>
<div id="topnavigation">
    <ul>
         <li><a href="javascript:ajaxpage('ajaxfiles/external.htm', 'rightcolumn');">link 1</a></li>
         <li><a href="javascript:ajaxpage('ajaxfiles/external2.htm', 'rightcolumn');">link 2</a></li>
         <li><a href="javascript:ajaxpage('ajaxfiles/external3.htm', 'rightcolumn');">link 3</a></li>
    </ul>
</div>

<div id="leftcolumn">
<a href="javascript:ajaxpage('ajaxfiles/external.htm', 'rightcolumn');">Porsche Page</a>
<a href="javascript:ajaxpage('ajaxfiles/external2.htm', 'rightcolumn');">Ferrari Page</a>
<a href="javascript:ajaxpage('ajaxfiles/external3.htm', 'rightcolumn');">Aston Martin Page</a>

<div style="margin-top: 2em">Load CSS & JS files</div>
<a href="javascript:loadobjs('ajaxfiles/style.css', 'ajaxfiles/tooltip.js');">Load "style.css" and "tooltip.js"</a>

</div>

<div id="rightcolumn"><h3>Choose a page to load.</h3></div>
<div style="clear: left; margin-bottom: 1em"></div>

</body>
CSS: 
#topnavigation {
width:739px;
border:3px solid black;
margin-bottom:10px;
}
#topnavigation ul {
list-style:none;
}
#topnavigation ul li {
display:inline;
}

mfg Maik
 
Hi,

ich rate dir von der Ajax technik für deine Zwecke ab.
Ich würde dir PHP empfehlen.

Problem bei Ajax ist, das du keine Seiten neu lädst, somit keine Vor- & Zurückbuttons des Browsers nutzen kannst.

Mit Php lädst du die seiten zwar neu, aber nur den kontext ...

Ich habe mir dazu eine Funktion geschrieben, die letztlich nichts anderes als Ajax macht, nur das du die Vor Zurück nehmen kannst.

Man kann sogar zwischen laden ;)
Sehr scheen wenn man ein Login hat und der User nicht eingeloggt ist .. wird gleich der Login angezeigt ..

PHP: 
function display($verz, $data)
     {

      if(file_exists($verz."/".$data.".php"))
      {
        ob_start();
        require_once(.$verz."/".$data.".php");
        $ausgabe = ob_get_contents();
        ob_end_clean();
      }else{
        ob_start();
        require_once("folder/datei.php");
        $ausgabe = ob_get_contents();
        ob_end_clean();
      }
        return $ausgabe;
     }
 
@crsakawolf: PHP hatte ich eingangs auch als erste Möglichkeit empfohlen, nur wird dies scheinbar nicht gewünscht, oder PHP steht nicht zur Verfügung.

Ein weiterer und noch entscheidender Vorteil gegenüber der AJAX-Variante: Sollte JS im Browser des Seitenbesuchers (wg. Sicherheitsgründen, Direktiven, o.ä.) deaktiviert sein, war's das mit dem munteren Datenaustausch ;)

Kommt also auch stückweise auf die Zielgruppe der Website an, ob sie in ihrem Browser JS aktiviert hat, um solche Interaktionen nutzen zu können - Stichwort: "Web 2.0".

mfg Maik
 
Man könnte doch auch IFRAMES verwenden. Bei der Navigation das Attribut target=iframeName vom Link setzten.
 
@Maik

Hast du vollkommen recht ^^ Ohne JScript biste angear***t ^^
Habe das auch schon erfahren. Hab die Seite dann verworfen und habe neu aufgebaut.
 
di_ettelo hat gesagt.:
Naja Iframes sind nur dann erwünscht wenn sich nur der Inhalt ändert.
Zum Vergrößern anklicken....
Was hier dann doch zutrifft :suspekt:
di_ettelo hat gesagt.:
ich möchte eine Website bauen bei dem nur der Inhalt wechselt und lädt also der rest der Seite lädt nicht neu (siehe Bilder) .

Also wenn man auf die Navigation den enstprechenden Button klickt kommt der Inhalt nicht im neuen Fenster vom verlinkten Button, sondern im selben also der Content wird getauscht.
Zum Vergrößern anklicken....
Maik hat gesagt.:
ansonsten, wenn Frames bzw. ein iFrame nicht erwünscht sind, benötigst du für dein Vorhaben ein serverseitiges Script (PHP) oder clientseitiges Script (JS / AJAX), um die Inhalte im Hauptdokument nachträglich dynamisch zu tauschen.
Zum Vergrößern anklicken....

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück