Das ganze über ein Script zu lösen, welches automatisch die ID des Links ausliest und weiterverarbeitet habe ich auch überlegt, habe aber vermutet, dass ich hier niemanden gewinnen könnte, der mir ein solches script schreibt. Danke, dass ich mich geirrt habe ;)
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.
Die entsprechenden Container gehören alle der class .container
an.
Ich habe dein Script dementsprechend abgeändert und die JS-Datei sieht jetzt so aus:
function hide(div) {
with(document.getElementById(div).style){
if(display=="inline-block"){
display="none";
}
}
};
function show(div) {
with(document.getElementById(div).style){
if(display=="none"){
display="inline-block";
}
}
};
// Versteckt alle Elemente der class .container außer der angegebenen ID
var hideAllExcept = function(id) {
for (var i = 0; i < document.querySelectorAll(".container").length; i++) {
var otherId = document.querySelectorAll[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 halben Sekunde (500ms)
setTimeout(function() {
// Verstecke alle anderen Elemente
hideAllExcept(id);
}, 500);
};
Leider funktioniert es trotzdem noch nicht.
Chrome gibt als Fehlermeldung "Uncaught TypeError: Cannot read property 'style' of null" aus, mit dem Verweis auf Zeile 2 der oben angefügten JS-Datei, was wohl darauf hinweist, dass ein Befehl ausgeführt werden soll, bevor der Inhalt geladen ist. (Quelle)
Weiß jemand Rat?
Danke schonmal für den großartigen Ansatz über this