Optimieren eines Inhaltwechslers mit Javascript

[Gunnar Bittersmann]

@@jobo:

nuqneH

Warum ...style.display = ""; ausreicht, um display = "block"; zu erreichen verstehe ich noch nicht so ganz.

Hatten wir heute erst: https://forum.selfhtml.org/?t=202858&m=1370767 ff.

Irgendwie juckts mich auch, dass der ja immer alle Divs durchgeht, eigentlich ja nur das aktuelle zurücksetzen müsste und das nächste "block" oder eben "" setzen zu müssen.

Nicht mal das musst du.

Der einfache Weg ist:
Die ein-/auszublendenden 'div'-Elemente bekommen eine ID; wenn nicht im Markup, dann per JavaScript:

var boxes=document.getElementById("wechselrahmen").getElementsByTagName('div'), boxcount=boxes.length;  
for (var i = 0; i < boxcount; i++) boxes[i].id = "wechselbox" + 1;

Dynamisch änderst du lediglich ein Attribut eines Vorfahrenelements ("wechselrahmen" bietet sich an); das kann @class sein

var frame = document.getElementById("wechselrahmen");  
frame.className = "visiblebox" + n;

oder @data-visiblebox:

if (frame.dataset) frame.dataset.visiblebox = n;  
else frame.setAttribute("data-visiblebox", n);

Den Rest erledigt das Stylesheet:

#wechselrahmen>div { display: none}  
#wechselrahmen[data-visiblebox="1"] wechselbox1 { display: block }  
#wechselrahmen[data-visiblebox="2"] wechselbox2 { display: block }  
#wechselrahmen[data-visiblebox="3"] wechselbox3 { display: block }

usw. bzw. mit Klassen:

#wechselrahmen.visiblebox1 wechselbox1 { display: block }  
#wechselrahmen.visiblebox2 wechselbox2 { display: block }  
#wechselrahmen.visiblebox3 wechselbox3 { display: block }

Wenn du das für beliebig viele Wechselboxen haben willst und nicht MAXANZAHL von Regeln ins Stylesheet schreiben willst, kannst du auch die CSS-Regeln dynamisch per JavaScript generieren.

Qapla'

PS: Für fähige Browser natürlich auch gern ohne ID:

#wechselrahmen[data-visiblebox="1"]>div:nth-child(1) { display: block }  
#wechselrahmen[data-visiblebox="2"]>div:nth-child(2) { display: block }  
#wechselrahmen[data-visiblebox="3"]>div:nth-child(3) { display: block }