EKKi: divs per Click ausblenden und dafür andere einblenden

Beitrag lesen

Mahlzeit,

ich habe hier drei divs untereinander.
In jedem steht der selbe Text nur in verschiedenen Sprachen.

Insofern bietet es sich an, dem <div> auch gleich die Information mitzugeben, welche Sprache es enthält:

<div class="Hallo" lang="de">Hallo</div>  
<div class="Hallo" lang="en">Hello</div>  
<div class="Hallo" lang="fr">Bonjour</div>

Als Standart

Standart? Sicher?

soll der deutsche Text sichtbar sein und englisch und französich nicht. Jetzt möchte ich irgendwo ein Link "English" platzieren. Wenn man dort klickt soll der deutsche Text (div) verschwinden und der englische Text (div) sichtbar werden.
Wie könnte ich das verwirklichen. Könnt ihr mir da einen Ansatz geben.
Ich schätze über Klassen und php, oder?

Ich schätze nicht. Überleg Dir, wo etwas stattfinden soll: im Browser des Benutzers. Wie sinnvoll sind da serverseitige Programmiersprachen? Browserseitiger Code - z.B. Javascript - könnte in Verbindung mit vernünftigem, semantischen HTML-Code und entsprechendem CSS genau das, was Du willst:

<script type="text/javascript">  
[code lang=javascript]  
  
function change(cls, lng) {  
  var divs = document.getElementsByTagName('DIV'); // Alle <div>-Elemente in Array einlesen  
  var re = RegExp.new('/' + cls + '/'); // Regulären Ausdruck anhand des übergebenen Klassennamens erstellen  
  
  for (var i = 0; i < divs.length; i++) { // Für jedes <div> ...  
    var div = divs[i];  
  
    if (re.test(div.className)) { // ... schauen, ob das <div> den übergebenen Klassenname hat  
      if (div.lang == lng) { // Wenn <div> übergebene Sprache hat ...  
        div.style.display = 'block'; // ... <div> einblenden ...  
      } else {  
        div.style.display = 'none'; // ... ansonsten ausblenden  
      }  
    }  
  }  
}

</script>

<span onclick="change('Hallo', 'en');">English</span>[/code]

MfG,
EKKi

--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|