Archiv-Modus von Basti1012 Lösungspage

iFrame Inhalt wechseln mit CSS und ohne Javascript
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>
basti1012.bplaced.net

iframe wechseln mit Css

Code
