Anzeige

DIV Container untereinander verlinken

DIV Container untereinander verlinken | PSD-Tutorials.de

Erstellt von traum, 28.09.2008.

  1. traum

    traum Noch nicht viel geschrieben

    Dabei seit:
    19.06.2008
    Beiträge:
    48
    Geschlecht:
    männlich
    Ort:
    Rodgau | Offenbach
    Software:
    PS CS3
    Kameratyp:
    Fuji S9500
    DIV Container untereinander verlinken
    Hallo zusammen,

    folgende Frage stellt sich mir grade. Ich habe auf einer Seite 2 Div Container. Einer Links, einer Rechts. Im linken befinden sich mehrere Links: 2005, 2006, 2007. Wenn ich auf 2005 klicke, soll im rechten Div der Inhalt für 2005 angezeigt werden. Klicke ich auf 2006, soll der Inhalt für 2006 angezeigt werden, der natürlich ein anderer ist, als der für 2005.

    Ich hoffe das hat jemand verstanden. Ist sowas mit CSS möglich, oder muss ich dafür Javascript oder sowas verwenden? Hat da vielleicht jemand eine Anleitung zu? Das wäre echt klasse.

    Danke schonmal,
    traum
     
    #1      
  2. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    DIV Container untereinander verlinken
    AW: DIV Container untereinander verlinken

    Soll die Seite dabei neugeladen werden oder sollen die Inhalte in Echtzeit verändert werden?
     
    #2      
  3. Luckah

    Luckah Wiss- und Lernbegieriger

    Dabei seit:
    18.08.2007
    Beiträge:
    50
    Geschlecht:
    männlich
    DIV Container untereinander verlinken
    AW: DIV Container untereinander verlinken

    Brauchst Javascript oder eine Asyncrone Kommunikation mit dem Server (AJAX). Zumindest wüsste ich nicht wie das mit CSS geht.
    Alternativ könntest du das auch mit PHP lösen und per URL den gewünschten Link übertragen, mit GET auslesen und dann einen include machen.
    Ich denke die PHP Variante ist für dich die besser Lösung, da es einfacher ist.
    Gruß,
    luckah
     
    #3      
  4. traum

    traum Noch nicht viel geschrieben

    Dabei seit:
    19.06.2008
    Beiträge:
    48
    Geschlecht:
    männlich
    Ort:
    Rodgau | Offenbach
    Software:
    PS CS3
    Kameratyp:
    Fuji S9500
    DIV Container untereinander verlinken
    AW: DIV Container untereinander verlinken

    Nein, die Seite soll nicht neu geladen werden.

    Schade, dass es mit CSS nicht geht. Aber wenn es mit PHP einfacher wäre, bzw. gut möglich ist, warum eigentlich nicht? Kannst du mir sagen wo ich sowas nachschlagen kann, Luckah? Mit php kenne ich mich noch weniger aus als mit CSS. :D
     
    #4      
  5. Luckah

    Luckah Wiss- und Lernbegieriger

    Dabei seit:
    18.08.2007
    Beiträge:
    50
    Geschlecht:
    männlich
    DIV Container untereinander verlinken
    AW: DIV Container untereinander verlinken

    Wenn die Seite nicht neugeladen werden soll fällt das leider flach =( Da bleibt dir nurnoch Javascript/Ajax übrig.
     
    #5      
  6. traum

    traum Noch nicht viel geschrieben

    Dabei seit:
    19.06.2008
    Beiträge:
    48
    Geschlecht:
    männlich
    Ort:
    Rodgau | Offenbach
    Software:
    PS CS3
    Kameratyp:
    Fuji S9500
    DIV Container untereinander verlinken
    AW: DIV Container untereinander verlinken

    Okay, danke. Wie nennt sich denn so eine Aktion in Javascript? Ist das ein simples aufklappen, oder nennt sich das irgendwie anders? Dann kann ich wenigstens im Netz nach einem Tutorial suchen.
     
    #6      
  7. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    DIV Container untereinander verlinken
    AW: DIV Container untereinander verlinken

    du kannst das mit java script lösen ...

    Ne krumme Lösung die ih mal für ne kleine Box genutzt hab die ein
    paar Inhaltsunspezfische Funktionen für ne Seite bietet.

    Dazu musst du in deinem fall hinter jeden link den aufruf einer js
    funktion legen (z.B. per Klick) und packst in das recht div mehrere
    divs die die unterschiedlichen Inhalte beinhalten. Jeder der Divs
    bekommt eine eindeutige ID und ne Class (show und hide z.B.).

    Mit der js funktion sprichst du dann jeweils das benötigte div per
    ID an und änderst die Klasse des div auf show und die des vorherigen
    wieder auf hide.

    Prinzip grob verstanden?

    Anosnten kann ich die sache auch mal heraussuchen und du baust
    dir das dann entsprechend um.
     
    #7      
  8. Luckah

    Luckah Wiss- und Lernbegieriger

    Dabei seit:
    18.08.2007
    Beiträge:
    50
    Geschlecht:
    männlich
    DIV Container untereinander verlinken
    AW: DIV Container untereinander verlinken

    Guter Lösungsansatz allerdings nur sinnvoll, sofern er wenig Inhalt hat (oder wie du es nennst eine kleine Box). Es wäre also interessant zu wissen was genau für Inhalte angezeigt werden sollen.
     
    #8      
  9. traum

    traum Noch nicht viel geschrieben

    Dabei seit:
    19.06.2008
    Beiträge:
    48
    Geschlecht:
    männlich
    Ort:
    Rodgau | Offenbach
    Software:
    PS CS3
    Kameratyp:
    Fuji S9500
    DIV Container untereinander verlinken
    AW: DIV Container untereinander verlinken

    Sehr gut jackprince, das hilft mir im Ansatz schon mal weiter, danke. Ich melde mich nochmal wenn was unklar ist.
     
    #9      
  10. MonikaTS

    MonikaTS Noch nicht viel geschrieben

    Dabei seit:
    12.09.2007
    Beiträge:
    12
    Geschlecht:
    weiblich
    DIV Container untereinander verlinken
    AW: DIV Container untereinander verlinken

    da ist mit sogenannten Ankerlinks /Sprunglinks lösbar

    Beispiel

    2006

    Code (Text):
    1. <a href="#2006" title="Jahr 2006">2006</a>
    dann dort wo der 2006 link landen sollte kommt hin

    Code (Text):
    1. <a name="2006" id="2006"></a>
    gut ist es , wenn man dem User dann einen zurück Link liefert, der genauso funktioniert meist mit *nach oben* oder *zum Menü*

    d.h. in das div wo der Inhalt von 2006 ist schreibt man rein

    Code (Text):
    1. <a href=#menue" title="zum Men&uuml;">zum Men&uuml;</a>
    und am Beginn des Menüs

    Code (Text):
    1. <a name="menue" id="menue"></a>
    lg
     
    #10      
x
×
×
teststefan