# 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:

```
<!-- 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:


```
<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>
```


```
$('#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:


```
<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>
```




```
$('#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:


```
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:


```
<!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:


```
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:


```
<!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

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:


```
<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


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

schreibst du 


```
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:


```
<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.


----------



## Webflasher (6. November 2011)

Sorry, Missverständnis, is jetzt aber auch egal...

Jetzt klappt nämlich alles******
Ich habe jedem li einfach noch einen title Attribut gegeben...

Vielen Dank, alles ist so, wie ich es wollte....tolle Sache so ein Forum 

Danke und einen schönen Abend noch


----------

