Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
iframe wechseln mit Css

iframe wechseln mit Css

iFrame Inhalt wechseln mit CSS und ohne Javascript

Der hier verwendete Code

<!doctype html> <html lang="de"> <head> <style> *{ margin:0; padding:0; } body{ height:100%; } main{ height:98vh; width:100vw; display:block; } iframe{ position:absolute; right:0; border:none; top:0; width:calc(100% - 100px); height:100%; } label{ width:100px; height:25%;border:1px solid black; display:block; position:relative; left:0; } iframe{ display:none; } input{ display:none } #f1:checked ~ iframe.f1{ display:block; } #f2:checked ~ iframe.f2{ display:block; } #f3:checked ~ iframe.f3{ display:block; } #f4:checked ~ iframe.f4{ display:block; } #f1:checked ~ label.l1, #f2:checked ~ label.l2, #f3:checked ~ label.l3, #f4:checked ~ label.l4 { background:green; } #f1:checked ~ iframe.f2, #f1:checked ~ iframe.f3, #f1:checked ~ iframe.f4 { display:none !important; } #f2:checked ~ iframe.f1, #f2:checked ~ iframe.f3, #f2:checked ~ iframe.f4 { display:none !important; } #f3:checked ~ iframe.f1, #f3:checked ~ iframe.f2, #f3:checked ~ iframe.f4 { display:none !important; } #f4:checked ~ iframe.f1, #f4:checked ~ iframe.f2, #f4:checked ~ iframe.f3 { display:none !important; } #f1:checked ~ label.l2, #f1:checked ~ label.l3, #f1:checked ~ label.l4 { background:rgba(255,0,0,0.4); pointer-events:none; } #f2:checked ~ label.l1, #f2:checked ~ label.l3, #f2:checked ~ label.l4 { background:rgba(255,0,0,0.4); pointer-events:none; } #f3:checked ~ label.l2, #f3:checked ~ label.l1, #f3:checked ~ label.l4 { background:rgba(255,0,0,0.4); pointer-events:none; } #f4:checked ~ label.l2, #f4:checked ~ label.l3, #f4:checked ~ label.l1 { background:rgba(255,0,0,0.4); pointer-events:none; } </style> </head> <body> <main> <input type="checkbox" id="f1"> <input type="checkbox" id="f2"> <input type="checkbox" id="f3"> <input type="checkbox" id="f4"> <label class="l1" for="f1">basti1012</label> <label class="l2" for="f2">selfhtml</label> <label class="l3" for="f3">html-seminar</label> <label class="l4" for="f4">soforthilfe-forum</label> <iframe class="f1" src="https://basti1012.bplaced.net/"></iframe> <iframe class="f2" src="https://wiki.selfhtml.org/wiki/Benutzer:Suit/"></iframe> <iframe class="f3" src="https://html-seminar.de"></iframe> <iframe class="f4" src="https://soforthilfe-forum.de"></iframe> </main> </body> </html>