Bestimmte Divs neu laden

Webflasher · 5. November 2011

Hallo Leute,

ich habe auf meiner Website drei relevante Divs. Eins fürs Menü, eins für eine Diashow, und eins für den Inhalt.

Ich würde nun gerne, dass wenn man auf einen Menüpunkt in dem nav-Div klickt, dass sich nur der Inhalt im Inhalts-Div ändert.

Ich suche nach einer simplen Variante, auch gerne mit JQuery oder so....

Danke

javaDeveloper2011 · 5. November 2011

Hallo,

wahrscheinlich brauchst du dafür nicht mal JS:

HTML:

<!-- Link im Menü -->
<a href="neuerContent.html" target="deinIframe">zum neuen Content</a>
<iframe name="deinIframe" style="width: 800px; height: 400px" 
src="alterContent.html"></iframe>

Der Content müsste dann halt immer separat in HTML-Dateien stehen.

Webflasher · 5. November 2011

danke für die schnelle Antwort erstmal....

Aber (das hatte ich vergessen zu sagen), ich würde gerne keine iFrame Lösung benutzen....

Danke

para_noid · 6. November 2011

Du könntest entweder die gesamten Inhalte im Inhaltsdiv laden und nur das aktuelle sichtbar machen, oder du lädst grundsätzlich nur einen und tauschst diesen dann über Ajax aus.

Erste Variante
Du brauchst dafür:

eine ID für das komplette Menü
je eine (zusätzliche) Klasse wie "seite1", "seite2" für die Menüpunkte
ID des allgemeinen Inhaltsdiv
innerhalb des allgemeinen Inhaltsdiv alle Inhalte, die du hast, in gesonderten Divs
- deren CSS sollte, bis auf das erste Div, {display: none;} enthalten
- sie sollten jeweils dieselben Klassen besitzen wie ihre entsprechenden Menüpunkte

Beispiel:

HTML:

<div id="menu">
  <ul>
    <li class="seite1">MENUTEXT</li>
    <li class="seite2">MENUTEXT</li>
    <li class="seite3">MENUTEXT</li>
  </ul>
</div>
<div id="inhalt">
  <div class="seite1">CONTENT</div>
  <div class="seite2">CONTENT</div>
  <div class="seite3">CONTENT</div>
</div>

Code:

$('#menu li').click(function() { // reagiert bei Klick auf irgendeinen Menüpunkt
  var inhalt = $(this).attr('class'); // gibt den String des Attributs zurück
  $('#inhalt div').css('display', 'none'); // setzt alle divs innerhalb des Inhaltsdiv auf display:none
  $('div .'+inhalt).css('display', 'block'); // macht das benötigte div sichtbar
});

Zweite Variante (ich gehe jetzt von der Verwendung mittels eines PHP-Scipts aus, es ginge freilich auch anders)
Du brauchst dafür:

ebenjenes PHP-Skript
eine ID für das komplette Menü
je eine (zusätzliche) Klasse wie "seite1", "seite2" für die Menüpunkte
ID des allgemeinen Inhaltsdiv

Beispiel:

HTML:

<div id="menu">
  <ul>
    <li class="seite1">MENUTEXT</li>
    <li class="seite2">MENUTEXT</li>
    <li class="seite3">MENUTEXT</li>
  </ul>
</div>
<div id="inhalt">
  CONTENT
</div>

Code:

$('#menu li').click(function() { // reagiert bei Klick auf irgendeinen Menüpunkt
  var inhalt = $(this).attr('class'); // gibt den String des Attributs zurück
  $.ajax({
    url: "content.php",
    data: "clicked="+inhalt,
    success: function(content){
      $('#inhalt').html(content); // überschreibt den alten Inhalt mit dem neuen
    }
  });
});

Das PHP-Script könnte so aussehen:

PHP:

if (isset($_GET['clicked'])){
  switch($_GET['clicked']){
    case 'seite1':
      echo 'Inhalt1';
      break;
    case 'seite2':
      echo 'Inhalt2';
      break;
    case 'seite3':
      echo 'Inhalt3';
      break;
  }
}

Persönlich tät ich das Zweite bevorzugen.
Alles ungetestet.

Webflasher · 6. November 2011

Hey,

danke erstmal für diese Umfangreiche Antwort...

Also, ich habe beide Varianten ausprobiert, doch es tut sich beim klicken leider gar nix

Vielleicht habe ich aber auch nur einen dummen Fehler gemacht...

Also, ich hab bei beiden Varianten

all deinen Code in EIN PHP-Dokument kopier (also natürlich für jede Variante ein Dokument).
Ich habe den Code nicht bearbeitet oder irgendwas ersetzt.

Aber es tut sich beim klicken einfach gar nichts....

Habt ihr ne Idee...****?

Danke

P.S.: Bevor du mich falsch verstehst; Natürlich habe ich um den JavaScript Code <script type....></script> und um den PHP Code noch <?PHP und ?> angehängt....

para_noid · 6. November 2011

Mh...

jQuery an sich ist inkludiert? (Download hier)
sagt die Firebug-Console unter Firefox etwas? Wenn nicht in Verwendung, zwingend besorgen (oder andere Debug-Tools für deinen Browser)

Ansonsten bitte mal den kompletten Code posten, HTML-Gerüst, jQuery und das PHP-Script.
Wenn du den Vorschlag nur hinzugefügt hast könnte es auch sein, dass die IDs einfach nicht übereinstimmen...

Webflasher · 6. November 2011

okay...

hier mal der Code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Div Loader 01</title>
<script type="text/javascript" src="../Scripts/jquery/jquery-1.6.2.js"></script>
<script type="text/javascript">

$('#menu li').click(function() { // reagiert bei Klick auf irgendeinen Menüpunkt
  var inhalt = $(this).attr('class'); // gibt den String des Attributs zurück
  $.ajax({
    url: "content.php",
    data: "clicked="+inhalt,
    success: function(content){
      $('#inhalt').html(content); // überschreibt den alten Inhalt mit dem neuen
    }
  });
});
</script>
<?PHP

if (isset($_GET['clicked'])){ 
  switch($_GET['clicked']){ 
    case 'seite1': 
      echo 'Inhalt1'; 
      break; 
    case 'seite2': 
      echo 'Inhalt2'; 
      break; 
    case 'seite3': 
      echo 'Inhalt3'; 
      break; 
  } 
}  

?>
</head>

<body>

<div id="menu">
  <ul>
    <li class="seite1">MENUTEXT</li>
    <li class="seite2">MENUTEXT</li>
    <li class="seite3">MENUTEXT</li>
  </ul>
</div>
<div id="inhalt">
  CONTENT
</div>

</body>
</html>

Firebug sagt nichts...

Eine Frage noch, muss ich denn noch die content.php erstellen, ich hab den Code nämlich noch nich so ganz 100%tig verstanden....

Danke******

para_noid · 6. November 2011

Okay, einen Punkt erstmal, den ich unterschlagen hab:

Code:

jQuery(document).ready(function() {
// gesamter jQuery-Code
}

Das stellt sicher, das alles erst ausgeführt wird, wenn der Content geladen wurde.

Eine Frage noch, muss ich denn noch die content.php erstellen, ich hab den Code nämlich noch nich so ganz 100%tig verstanden....

Jup, Verzeihung. So müsste das bei dir aussehen:

Die index.html:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Div Loader 01</title>
<script type="text/javascript" src="../Scripts/jquery/jquery-1.6.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
  $('#menu li').click(function() { // reagiert bei Klick auf irgendeinen Menüpunkt
    var inhalt = $(this).attr('class'); // gibt den String des Attributs zurück
    $.ajax({
      url: "content.php",
      data: "clicked="+inhalt,
      success: function(content){
        $('#inhalt').html(content); // überschreibt den alten Inhalt mit dem neuen
      }
    });
  });
});
</script>

</head>
<body>
<div id="menu">
  <ul>
    <li class="seite1">MENUTEXT</li>
    <li class="seite2">MENUTEXT</li>
    <li class="seite3">MENUTEXT</li>
  </ul>
</div>
<div id="inhalt">
  CONTENT
</div>
</body>
</html>

Die content.php (im selben Ordner, sonst muss die Angabe innerhalb $.ajax angepasst werden):

PHP:

<?php

if (isset($_GET['clicked'])){ 
  switch($_GET['clicked']){ 
    case 'seite1': 
      echo 'Inhalt1'; 
      break; 
    case 'seite2': 
      echo 'Inhalt2'; 
      break; 
    case 'seite3': 
      echo 'Inhalt3'; 
      break; 
  } 
}  

?>

Webflasher · 6. November 2011

SUPPPPPPPPPER Vielen Dank, es funktioniert******!

Aber leider ist es so, dass ich auf der Website das Menü mittels JQuery animiert habe, dummerweise, ist es für DIESEN Code wichtig, dass alle li den selben Klassen Attribut haben.

Also müsste ich irgendein Anderes Attribut abfragen, dass bei allen li's anders wäre...
id geht ja schlecht, da ich ja nicht id und class im selben Tag angeben kann....oder?

Irgendeine Idee...

Aber noch mal vielen Dank, das war schon mal eine Riesen Hilfe******

para_noid · 6. November 2011

id geht ja schlecht, da ich ja nicht id und class im selben Tag angeben kann....oder?

Doch, natürlich geht das. So liefe das Ganze über die ID:

HTML:

<div id="menu">
  <ul>
    <li id="seite1">MENUTEXT</li>
    <li id="seite2">MENUTEXT</li>
    <li id="seite3">MENUTEXT</li>
  </ul>
</div>

Bei den li kannst du jederzeit ein class="irgendneklasse" hinzufügen.
Und statt

Code:

var inhalt = $(this).attr('class'); // gibt den String des Attributs zurück

schreibst du

Code:

var inhalt = $(this).attr('id'); // gibt den String des Attributs zurück

Du kannst aber grundsätzlich auch mehrere Klassen angeben (die Abfrage unter jQuery verkompliziert sich zwar dadurch, aber es ist genauso machbar), also als Beispiel:

HTML:

<div id="menu">
  <ul>
    <li class="alle seite1">MENUTEXT</li>
    <li class="alle seite2">MENUTEXT</li>
    <li class="alle seite3">MENUTEXT</li>
  </ul>
</div>

wichtig, dass alle li den selben Klassen Attribut haben

Das sollte eigentlich nicht zwingend notwendig sein - in dem Code von mir werden ja auch alle li angesprochen, aber über die ID des ul.

Bestimmte Divs neu laden

Webflasher

Mitglied

javaDeveloper2011

Erfahrenes Mitglied

Webflasher

Mitglied

para_noid

hirnrissig

Webflasher

Mitglied

para_noid

hirnrissig

Webflasher

Mitglied

para_noid

hirnrissig

Webflasher

Mitglied

para_noid

hirnrissig

Neue Beiträge