✔ bei klicken auf <li> funktion aufrufen

[kazekage]

Hallo Leute,
hab folgende Liste:

					<ul>
						<li id="1"><a href="#" onclick="change()">Erfolg hat…</a></li>
						<li id="2"><a href="#" onclick="change2()">Gute Strategie…</a></li>
						<li id="3"><a href="#" onclick="change3()">…ohne Verstand?</a></li>
						<li id="4"><a href="#" onclick="change4()">Ihre Marke……</a></li>
						<li id="5"><a href="#" onclick="change5()">Gute Freunde…</a></li>
						<li id="6"><a href="#" onclick="change6()">Erfahrung…</a></li>
					</ul>

wenn auf ein <li> Element geklickt wird, dann wird eine Funktion auufgerufen. Wie ihr seht hab ich für jedes <li> eine eigene Funktion. Die Funktion schaltet jeweils ein div visible. Es gibt also 6 divs mit unterschiedlichen texten.

Hier der Code für das visible schalten der divs:

function change(){
document.getElementById("1").className ='aktive';
document.getElementById("erfolg").style.display ="inline";
document.getElementById("strategie").style.display ="none";
document.getElementById("intelligenz").style.display ="none";
document.getElementById("marke").style.display ="none";
document.getElementById("freunde").style.display ="none";
document.getElementById("erfahrung").style.display ="none";
}

is für alle 6 fast gleich nur das halt immer ein anderes inline is.

Meine Frage:
Wie kann ich diesen sehr langen code verkürzen?

 

[tombe]

Also wenn ich dich richtig verstanden habe, sollte es so klappen:

<script language="javascript" type="text/javascript">
function change(id){

zustand = new Array("none", "none", "none", "none", "none", "none");

zustand[id - 1] = "inline";

document.getElementById(id).className ='aktive';
document.getElementById("erfolg").style.display = zustand[0];
document.getElementById("strategie").style.display = zustand[1];
document.getElementById("intelligenz").style.display = zustand[2];
document.getElementById("marke").style.display = zustand[3];
document.getElementById("freunde").style.display = zustand[4];
document.getElementById("erfahrung").style.display = zustand[5];
}
</script>

<ul>
    <li id="1"><a href="#" onclick="change(1);">Erfolg hat…</a></li>
    <li id="2"><a href="#" onclick="change(2);">Gute Strategie…</a></li>
    <li id="3"><a href="#" onclick="change(3);">…ohne Verstand?</a></li>
    <li id="4"><a href="#" onclick="change(4);">Ihre Marke……</a></li>
    <li id="5"><a href="#" onclick="change(5);">Gute Freunde…</a></li>
    <li id="6"><a href="#" onclick="change(6);">Erfahrung…</a></li>
</ul>

 

[kazekage]

Supi. Funktioniert einwandfrei.

Jeztt hab ich nur noch ien kleines Problem:
Ich möchte das wenn ich zb: auf Erfolg hat... klick das sich die Textfarbe von Erfolg hat... ändert und dass wieder für jedes <li> element. Also quasi wenn der inka aktive is dann soller ne andere farbe haben.

 

[tombe]

Sorry aber versuche mal ein bisschen "sauberer" zu schreiben was du willst. Ich verstehe kein bisschen was du mit "... wenn der inka aktive is..." !

Bei was soll die Farbe geändert werden bei dem jeweiligen Link oder bei dem Text der angezeigt wird?

 

[kazekage]

sorry fürs blöde schreiben^^
noch ein versuch also:

<li id="1"><a href="#" onclick="change(1)">Erfolg hat…</a></li>

nach dem <a href="#"> steht ja immer ein text, der als Beschreibung für den Link dient. Ich möchte eben das wenn auf den Text/Link geklickt wird dieser Rot wird. Also "Erfolg hat..." steht dann mit roter Schrift dort.

 

[tombe]

Die Links bzw. das <a></a>-Tag wird ja eigentlich gar nicht benötigt. Deshalb würde ich es so lösen:

<style type="text/css">
.aktive
	{
		font-weight: bold;
		color:#FF0000;
	}

.normal
	{
		font-weight: normal;
		color:#000000;
	}
</style>

<script language="javascript" type="text/javascript">
function change(id){

zustand = new Array("none", "none", "none", "none", "none", "none");
zustand[id - 1] = "inline";

for (z = 1; z <= 6; z++) {
	document.getElementById(z).className ='normal';
}

document.getElementById(id).className ='aktive';
document.getElementById("erfolg").style.display = zustand[0];
document.getElementById("strategie").style.display = zustand[1];
document.getElementById("intelligenz").style.display = zustand[2];
document.getElementById("marke").style.display = zustand[3];
document.getElementById("freunde").style.display = zustand[4];
document.getElementById("erfahrung").style.display = zustand[5];
}
</script>

<ul>
    <li id="1" onclick="change(1);">Erfolg hat…</li>
    <li id="2" onclick="change(2);">Gute Strategie…</li>
    <li id="3" onclick="change(3);">…ohne Verstand?</li>
    <li id="4" onclick="change(4);">Ihre Marke……</li>
    <li id="5" onclick="change(5);">Gute Freunde…</li>
    <li id="6" onclick="change(6);">Erfahrung…</li>
</ul>

<div id="erfolg">Erfolg</div>
<div id="strategie">Strategie</div>
<div id="intelligenz">Intelligenz</div>
<div id="marke">Marke</div>
<div id="freunde">Freunde</div>
<div id="erfahrung">Erfahrung</div>

Oder du schaust dir das hier bei SelfHTML mal an.

 

[kazekage]

SSSSSSSSSSSSUUUUUUUUUUUUPPPPPPPPPPPPPPIIIIIIIIII************************!!

VIELEN DANK******!! *Verbeug*
hast mir sehr geholfen