http://www.kingsite.jp/blog/web-designer/2015-04.php

<div class="tabtest01">
<samp>
<ul>
<li><label for="testmenu1">メニュー1</label>
</li><li><label for="testmenu2">メニュー2</label>
</li><li><label for="testmenu3">メニュー3</label>
</li></ul>

<input type="radio" name="menu" id="testmenu1" checked="">
<div class="tabtest01_box">
<p>メニュー1の 本文</p>
</div>
<input type="radio" name="menu" id="testmenu2">
<div class="tabtest01_box">
<p>メニュー2の 本文</p>
</div>
<input type="radio" name="menu" id="testmenu3">
<div class="tabtest01_box">
<p>メニュー3の 本文</p>
</div>
</samp>
</div>

 .tabtest01 ul {
list-style-type: none; width:100%; margin: 0; padding: 0;
}
.tabtest01 label {
display: block;
}
.tabtest01 input {
display: none;
}
.tabtest01 ul li {
text-align:center; display: inline-block; width: 200px; vertical-align: top;
}
.tabtest01_box {
width: 600px; margin-top: 0;
}
.tabtest01 input:not(:checked) + .tabtest01_box p {
display: none;
}
samp #testmenu1 + .tabtest01_box p,samp li:nth-child(1) label{
background:#ffb8b9
}
samp #testmenu2 + .tabtest01_box p,samp li:nth-child(2) label{
background:#a8daf5
}
samp #testmenu3 + .tabtest01_box p,samp li:nth-child(3) label{
background:#fdf391
}