<div class="main">
<div class=grid>
<div class=grid__column onclick="openContent('content1')">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><i class="fa fa-home fa-lg"></i></label>
</div>
<div class=grid__column onclick="openContent('content2')">
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><i class="fa fa-plus fa-lg"></i></label>
</div>
<div class=grid__column onclick="openContent('content3')">
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><i class="fa fa-minus fa-lg"></i></label>
</div>
<div class=grid__column onclick="openContent('content4')">
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><i class="fa fa-question fa-lg"></i></label>
</div>
</div>
<div class="content">
<div id="content1" class="content88 content11">
<p style="padding: 100px; font-size: 48px;">content1</p>
</div>
<div id="content2" class="content88 content22">
<p style="padding: 100px; font-size: 48px;">content2</p>
</div>
<div id="content3" class="content88 content33">
<p style="padding: 100px; font-size: 48px;">content3</p>
</div>
<div id="content4" class="content88 content44">
<p style="padding: 100px; font-size: 48px;">content4</p>
</div>
</div>
</div>* {
box-sizing: border-box;
}
/* body {background: #2F2556; color: #B9B5C7; font: 14px 'Open Sans', sans-serif; -webkit-user-select: none;} */
.grid {
display: grid;
grid-gap: 0px;
grid-template-columns: repeat( 4, 4fr);
/* border: 1px solid; */
}
.grid__column {
/* background-color: #373737; */
padding: 0px;
height: 48px;
}
.content {background: #fff; color: #373737;}
/* .content > div {display: none; padding: 20px 25px 5px;} */
#content2,#content3,#content4 { display: none; }
input {display: none;}
label {display: inline-block; padding: 15px 25px; font-weight: 600; text-align: center; width: 100%; color: #00796b}
/* label:hover {color: #fff; cursor: pointer;}
input:checked + label {background: #ed5a6a; color: #fff; border-bottom: 1px solid black } */
input:checked + label {border-bottom: 1px solid #e91e63; color: #e91e63; }
.content11 {
min-width: 200px; min-height: 200px; background: pink; text-align: center;
}
.content22 {
min-width: 200px; min-height: 200px; background: #D6D9FD; text-align: center;
}
.content33 {
min-width: 200px; min-height: 200px; background: #E1FEFF; text-align: center;
}
.content44 {
min-width: 200px; min-height: 200px; background: #FFFED8; text-align: center;
}
function openContent(contentName) {
var i;
var x = document.getElementsByClassName("content88");
// alert(contentName)
for (i = 0; i < x.length; i++) {
//alert(x[i].innerHTML);
x[i].style.display = "none";
}
document.getElementById(contentName).style.display = "block";
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.