Hallo nochmal,
vielen Dank für eure Hilfen.
Ich habe eure Tipps und Anweisungen wahrnehmend getüftelt und das gewünschte Ergebnis bekommen.
Würde mich freuen, wenn Ihr euch meinen Code mal anschaut und mir sagen könnt ob ich den Code nicht weiter vereinfachen könnte, also könnte ich bspw den Inhalt des li-Elements aus dem die id der section generiert wird nicht als Parameter übergeben, und kann ich irgendwie die doppelte for-Schleife umgehen.
Bin eigentlich so schon mehr als zufrieden, nur helfen eben solche Feinheiten beim tieferen Verständnis.
<ul>
<li>EINS</li>
<li>ZWEI</li>
</ul>
<section id="eins">
<p>AAAAA
</section>
<section id="zwei">
<p>BBBBB
</section>
body {font-family: Verdana;}
ul{padding: 0;}
li{background-color: green; color: #fff; list-style: none; display: inline-block;
padding: 3px 9px; border-radius: 3px; cursor: pointer; margin-right: 3px; font-weight: bold; font-size: 13px;}
section{display: none;}
var li = document.getElementsByTagName("li");
var section = document.getElementsByTagName("section");
/* Durchlaufe alle vorhandenen li-Elemente. */
for(var i = 0; i < li.length; i++) {
/* Ermittle welches li-Element die Funktion auslöst. */
li[i].onclick = function() {
/****************************************************************************
* Generiere aus dem Inhalt des angeklickten li-Elements die id der Section, *
* welche angezeigt werden soll und speichere diese in einer Variable. *
* Der Wert wird sicherheitshalber immer in Kleinbuchstaben umgewandelt. *
****************************************************************************/
var id_aus_li = this.innerHTML.toLowerCase();
for(var i = 0; i < li.length; i++){
li[i].style.backgroundColor = "green";
section[i].style.display = "none";
}
this.style.backgroundColor = "red";
document.getElementById(id_aus_li).style.display = "block";
}
}
Danke nochmal
LG vsenol