blumentopf: Inhalt (Text und Bild) austauschen

Was ist die beste Möglichkeit, um den angezeigten Inhalt eines Bereiches auszutauschen?
Angenommen ich habe rechts einen Anzeigebereich mit Text und Bildern, und links ein Register, in dem man zwischen verschiedenen Inhalten für den rechten Bereich wählen kann.

-Inhalt in einen Div Container, ausblenden mit display ="none"?
In dem Fall wäre die Frage, wie man das am elegantesten tut. Z.B. bei Auswahl eines neuen Inhalts alle Inhalts-Divs ausblenden, da man nicht weiß welches gerade sichtbar ist, und anschließend das gewählte div wieder einblenden?
Dann wäre die Frage wie man am einfachsten mehrere divs auf einmal ausblendet, ohne sie alle einzeln aufrufen zu müssen.

-oder den Inhalt austauschen auf irgendeine Art, wie mit einem beispielsweise mit einem iframe?

  • oder ganz anders?
  1. Was ist die beste Möglichkeit, um den angezeigten Inhalt eines Bereiches auszutauschen?

    Schwebt dir etwas vor in dieser Art ?

    1. Ja, damit müsste es gehen. Sieht allerdings recht kompliziert aus.
      Ich glaube das Herzstück ist dieses script hier:

      function(data) {  
              var zit    = $("#zitat"),  
                  steu   = $("#steuerung td"),  
                  aut    = $("#autoren"),  
                  zURL   = "http://lotharmelching.de/text/allezitate.txt",  
                  imax   = 0,  
                  i, j, sp, dd,  
        
                  // zeige Zitat und aktualisiere Steuerung  
                  zeige = function() {  
                      zit.load(zURL + " #" + i, function() {  
                          $(this).scrollTop(0);  
                      });  
                      steu.each(function(idx) {  
                          switch(idx) {  
                              case 0 : j = (i == 1) ? -120 : 0; break;  
                              case 1 : j = (i == 1) ? -150 : -30; break;  
                              case 2 : j = (i == imax) ? -180 : -60; break;  
                              default: j = (i == imax) ? -210 : -90;  
                          }  
                          $(this).css({backgroundPosition: j});  
                          if (i === 1 || i === imax) {  
                              steu.removeClass("hover");  
                          }  
                      });  
                  };  
        
      
      

      Das basiert - ebenso wie die Antwort von baba - soweit scheinbar auf den jquery tools. Damit habe ich mich nocht nicht befasst bislang. Verstehe ich das richtig, dass man das einfach einbinden muss und dann verwenden kann? In diesem Fall durch folgende Zeile
      <script src="../../javascript/jquery_last_min.js"></script>

      Was ist die beste Möglichkeit, um den angezeigten Inhalt eines Bereiches auszutauschen?

      Schwebt dir etwas vor in dieser Art ?

      1. Verstehe ich das richtig, dass man das einfach einbinden muss und dann verwenden kann? In diesem Fall durch folgende Zeile

        <script src="../../javascript/jquery_last_min.js"></script>

        Ja, aber jQuery muss dort auch vorhanden sein. Mir hat bei dem Ganzen die jQuery Main Page sehr geholfen.

        Gruß H.

        1. Besten Dank, hab mittlerweile auch das meiste rausgefunden.
          Würde sich wohl mal lohnen, sich damit zu beschäftigen..

          Ja, aber jQuery muss dort auch vorhanden sein. Mir hat bei dem Ganzen die jQuery Main Page sehr geholfen.

          Gruß H.

  2. Was ist die beste Möglichkeit, um den angezeigten Inhalt eines Bereiches auszutauschen?

    Du kannst natürlich den Inhalt irgendwo vorhalten und dann mittels JS den Inhalt tauschen. Das Event kann ein Klick im Menü (Register) sein. Das Austauschen kann mit jquery geschehen. BEISPIEL (kann man noch besser machen).

    Der Nachteil ist: du musst alle Inhalte schon laden, beim ersten Request.
    Besser: Nutze AJAX, um Inhalte nachzuladen, auch das geht mit jquery.

    Cheers,
    Baba