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>