Link mit mehreren JS-Funktionen verknüpfen

[molily]

Hallo,

An welche stelle des JS muss ich einen delay setzen? (Bei den Beispielen die ich im Netz gefunden habe waren die scripte anders aufgebaut)

Funktionen definieren:
http://de.selfhtml.org/javascript/sprache/funktionen.htm

Timeout setzen:
http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout

Die Logik ließe sich vereinfachen, indem du alle fraglichen IDs in eine Liste schreibst. Mit zwei Funktionen wird das Zeigen und Verstecken gesteuert:

// Liste mit allen Bereichen  
var ids = ['ring', 'hej', 'chair', 'uon', 'iron', 'baglight', 'clip', 'gridbook', 'stuff', 'vita', 'kontakt'];  
  
// Versteckt alle Elemente außer der angegebenen ID  
var hideAllExcept = function(id) {  
  for (var i = 0, l = ids.length; i < l; i++) {  
    var otherId = ids[i];  
    if (id != otherId) {  
      hide(otherId);  
    }  
  }  
};  
  
// Zeigt ein Element, versteckt andere nach Wartezeit  
var showAndHide = function(aElement) {  
  // Hole die ID aus dem href-Attribut  
  var id = aElement.hash.substring(1);  
  show(id);  
  // Verzögerung von einer Sekunde (1000ms)  
  setTimeout(function() {  
    // Verstecke alle anderen Elemente  
    hideAllExcept(id);  
  }, 1000);  
};

Das HTML kann dann so aussehen:

<a href="#ring" onclick="showAndHide(this)">ring</a>  
<a href="#chair" onclick="showAndHide(this)">chair</a>

usw.

this ist hier das angeklickte a-Element, es wird an die Funktion übergeben, damit sie die ID aus dem href-Attribut lesen kann. Damit spart man sich, es zweimal im Code anzugeben.

(Ungetesteter Beispielcode.)

Das lässt sich noch weiter verbessern und verallgemeinern, z.B. indem du Klassen anstatt IDs verwendest und die Elemente mit document.querySelector ansprichst. Dann musst du im JavaScript keine Liste von IDs pflegen, sondern durchläufst mit einer Schleife die gefundenen Elemente.

Auch das Event-Handling ließe sich mit JavaScript lösen, sodass die vielen gleichen onclick-Attribute im HTML überflüssig werden. Siehe dazu:
http://molily.de/js/event-handling-grundlagen.html
http://molily.de/js/event-handling-effizient.html

wie kann ich dem Link sagen, dass er die obigen Schritte in der richtigen Reihenfolge ausführen soll und habe ich irgendwo einen Fehler den ich nicht finde, wegen dessen meine .js-datei ignoriert wird?

Die Funktionen show und hide werden korrekt aufgerufen.
hide() nimmt aber nur eine ID als Parameter entgegen, nicht mehrere. Du müsstest also dutzende hide()-Aufrufe tätigen, oder hide so umschreiben, dass es eine variable Anzahl von Parametern entgegennimmt. Das ist sehr umständlich und der Wartungsaufwand hoch. Daher habe ich in meinem Beispiel oben die Funktion hideAllExcept definiert, die mit einer for-Schleife über eine einmal definierte Liste läuft.

Grüße,
Mathias