Табы без JS на CSS и Flex
<div class="tabs">
<input id="tab-i1" type="radio" name="tab" checked="checked" />
<div class="tabs-l">
<label for="tab-i1" id="tab-l1">
<span>Вкладка 1</span>
</label>
</div>
<input id="tab-i2" type="radio" name="tab" />
<div class="tabs-l">
<label for="tab-i2" id="tab-l2">
<span>Вкладка 2</span>
</label>
</div>
<input id="tab-i3" type="radio" name="tab" />
<div class="tabs-l">
<label for="tab-i3" id="tab-l3">
<span>Вкладка 3</span>
</label>
</div>
<div class="tabs-content">
<div id="tab-c1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo consequuntur provident doloribus aut quia possimus aliquid architecto iusto dicta quae modi, magni hic eaque quisquam ullam laborum est nesciunt delectus.</div>
<div id="tab-c2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, consequuntur aspernatur aliquid nobis quos vel rerum dolorum quam. Corrupti ea, consectetur nihil iure laudantium amet neque! Deleniti, expedita enim quia?</div>
<div id="tab-c3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident veritatis perferendis voluptatibus cupiditate enim earum numquam aliquam impedit, dignissimos eveniet sunt, similique voluptatem amet sint tempore minima. Ducimus dolore, obcaecati.</div>
</div>
</div>
.tabs {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
margin-top:25px;
-ms-flex-pack:distribute;
justify-content:space-around;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.tabs > .tabs-l {
-ms-flex-preferred-size:33%;
flex-basis:33%;
text-align:center;
}
.tabs-l label {
display:inline-block;
text-align:center;
cursor:pointer;
background:red;
color:#FFF;
padding:7px;
}
.tabs > input {
display:none;
}
.tabs-content {
position:relative;
margin-top:25px;
}
.tabs-content > div {
position:absolute;
top:0;
left:-9999px;
opacity:0;
-webkit-transition:opacity .777s;
transition: opacity .777s
}
.tabs > #tab-i1:checked ~ .tabs-l > #tab-l1,
.tabs > #tab-i2:checked ~ .tabs-l > #tab-l2,
.tabs > #tab-i3:checked ~ .tabs-l > #tab-l3 {
background:green;
}
.tabs > #tab-i1:checked ~ .tabs-content #tab-c1,
.tabs > #tab-i2:checked ~ .tabs-content #tab-c2,
.tabs > #tab-i3:checked ~ .tabs-content #tab-c3 {
position:static;
left:0;
opacity:1;
}