JS Überlegungshilfe

[Nico]

Ich hab mir jetzt mit CSS + JS eine Navigation gebastelt:

www.nico-meier.de/webspace/css-design

Um die Seite drumrum gehts ned, die ist eh noch fürn A*, sondern erstmal nur um die Navi

Mein JS Code sieht jetzt so aus:

[js]
function click_01() {
document.getElementById('content-01').style.display = 'block';
document.getElementById('content-02').style.display = 'none';
document.getElementById('content-03').style.display = 'none';
document.getElementById('content-04').style.display = 'none';

document.getElementById('link-01').style.backgroundColor = '#9CF';
document.getElementById('link-02').style.backgroundColor = 'transparent';
document.getElementById('link-03').style.backgroundColor = 'transparent';
document.getElementById('link-04').style.backgroundColor = 'transparent';

}

function click_02() {
document.getElementById('content-01').style.display = 'none';
document.getElementById('content-02').style.display = 'block';
document.getElementById('content-03').style.display = 'none';
document.getElementById('content-04').style.display = 'none';

document.getElementById('link-01').style.backgroundColor = 'transparent';
document.getElementById('link-02').style.backgroundColor = '#9C9';
document.getElementById('link-03').style.backgroundColor = 'transparent';
document.getElementById('link-04').style.backgroundColor = 'transparent';

}

function click_03() {
document.getElementById('content-01').style.display = 'none';
document.getElementById('content-02').style.display = 'none';
document.getElementById('content-03').style.display = 'block';
document.getElementById('content-04').style.display = 'none';

document.getElementById('link-01').style.backgroundColor = 'transparent';
document.getElementById('link-02').style.backgroundColor = 'transparent';
document.getElementById('link-03').style.backgroundColor = '#F66';
document.getElementById('link-04').style.backgroundColor = 'transparent';

}

function click_04() {
document.getElementById('content-01').style.display = 'none';
document.getElementById('content-02').style.display = 'none';
document.getElementById('content-03').style.display = 'none';
document.getElementById('content-04').style.display = 'block';

document.getElementById('link-01').style.backgroundColor = 'transparent';
document.getElementById('link-02').style.backgroundColor = 'transparent';
document.getElementById('link-03').style.backgroundColor = 'transparent';
document.getElementById('link-04').style.backgroundColor = '#FC6';

}
[/js]

Irgendwann tritt natürlich das Problem auf, dass es bei einer langen Navigation (7,8 Tabs) sehr sehr unübersichtlich wird und ich 8 einzelne Funktionen brauche.

Die frage: wie kann ich das eleganter lösen?

Ich hab mir schon ein array gedacht mit boolschen Werten ob ein oder an.. das heißt aus dem ersten (an, aus, aus, aus) dann ein 1000 machen und halt irgendwie auslesen.

Jemand ne Idee?

[LowBob]

Wie wäre es denn grundsätzlich immer alles zu deaktiveren und bei click das entsprechende Element einfach zu aktivieren (indem du die ID übergibst)? Im prinzip sollte das dann mit nur einer function zu realisieren sein.

[Nico]

Leider bin ich in JS nicht bewandert, aber es ist ähnlich wie PHP

[js]
function click(navi_id) {

//Erstmal alles Null
document.getElementById('content-01').style.display = 'none';
document.getElementById('content-02').style.display = 'none';
document.getElementById('content-03').style.display = 'none';
document.getElementById('content-04').style.display = 'none';

//Aktivieren
document.getElementById('content-0' + navi_id).style.display = 'block';

}
[/js]

Jetzt ist nur noch die Frage wie ich das dann mit den Farben mache... entweder wieder einzeln oder eine 4zeillige If-Abfrage .. hmm ^^

[LowBob]

Willst du den den kompletten Contentbereich immer in bunt anbieten? Ist der Code der dahinter steckt für die Inhalte bzw. Navi statisch oder dynamisch? Wenn der Dynamisch ist erstellste eine Array aus Farben oder lässt Javascript die Elemente holen mit z.B. document.getElementsByTag('div') holen machst eine Schleife drauf und gibst denen Backgroundcolor mit. Kann auch sein das ich jetzt das Vorhaben ein bisschen falsch verstanden habe.

Edit: Auch deine jetztige function ist noch mehr oder weniger statisch da musst du nochmal dran, mit Tag holen, ausschleifen und ID exploden und prüfen. Wenn die ID mit content beginnt dann style.display = 'none';, es sei denn du möchtest das alles statisch ist.