JS Überlegungshilfe

Dieses Thema im Forum "Webmaster Hilfe / Programmierer Forum" wurde erstellt von Nico, 07.08.2009.

  1. Nico

    Nico Ehemaliges Teammitglied

    Dabei seit:
    28.10.2005
    Beiträge:
    6.675
    Zustimmungen:
    0
    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?
     
  2. AdMan

    schau mal hier: Windows-Wartungs-Tool. Viele Probleme lassen sich damit einfach beheben. Oftmals ist der PC dann auch schneller!
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  3. LowBob

    LowBob Erfahrener Benutzer

    Dabei seit:
    22.06.2009
    Beiträge:
    629
    Zustimmungen:
    0
    Ort:
    Lübeck
    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.
     
  4. Nico

    Nico Ehemaliges Teammitglied

    Dabei seit:
    28.10.2005
    Beiträge:
    6.675
    Zustimmungen:
    0
    Leider bin ich in JS nicht bewandert, aber es ist ähnlich wie PHP :D

    [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 ^^
     
  5. LowBob

    LowBob Erfahrener Benutzer

    Dabei seit:
    22.06.2009
    Beiträge:
    629
    Zustimmungen:
    0
    Ort:
    Lübeck
    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.
     
  6. AdMan

    Es ist generell erstmal empfehlenswert alle ggf. veralteten oder fehlerhaften Treiber zu scannen und auf neue zu aktualisieren. Hier kannst du einen Treiber-Scanner downloaden. Das erspart oftmals viel Ärger und hilft gegen diverse Probleme.
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
Thema:

JS Überlegungshilfe

Die Seite wird geladen...

JS Überlegungshilfe - Ähnliche Themen

  1. JS: Steuerbefehl maskieren

    JS: Steuerbefehl maskieren: Hallo Community, ich arbeite zurzeit an einer Seite, die komplett mit Ajax XMLHttpReqests arbeiten soll. Da dadurch kein reload zustande kommt,...
  2. [Virus] JS/Redirector.455

    [Virus] JS/Redirector.455: Hallo, Hab mir den Virus wie oben genannt leider eingefangen... Wollte dann mit der software" Malwarebytes-Anti-Malware " die Infizierte Objekte...
  3. Nochmal JS Problem.

    Nochmal JS Problem.: Halloooooo zusammen, nächstes Problem, wieder mit Javascript. Ich habe hier einen Code, Javascript. Dieser hat die Funktion auf Knopfdruck...
  4. JS debugger

    JS debugger: Ich finde einfach keinen Oline JS debugger der einem auch sagt, was man für fehler gemacht hat, nicht einfach nur "syntax error" schreibt. ;(