<style>
*{
margin: ;
padding: ;
text-decoration: none;
list-style: none;
outline:none;
}
.box{
width: 600px;
overflow: hidden;
border:1px solid #eee;
margin: 50px auto;
}
.nav{
width: 600px;
}
.nav_list{
float:left;
width:33.333%;
box-sizing: border-box;
}
.nav_title{
display: block;
line-height: 40px;
text-align: center;
background: white;
cursor: pointer;
border-left: 1px solid #eee;
}
.nav_txt{
position:relative;
width: 600px;
background: white;
padding: 20px;
}
.m1{
margin-left: -%;
}
.m2{
margin-left: -%;
}
.nav_radio{
display: none;
}
.nav_radio:checked + .nav_title{
background: #f5f5f5;
}
.nav_radio:checked ~ .nav_txt{
z-index: ;
}
</style>
<body>
<div class="box">
<ul class="nav">
<li class="nav_list">
<input type="radio" checked="checked" name="nav" id="nan" class="nav_radio"/>
<label for="nan" class="nav_title">男士</label>
<p class="nav_txt">男士页面</p>
</li>
<li class="nav_list">
<input type="radio" name="nav" id="nv" class="nav_radio"/>
<label for="nv" class="nav_title">女士</label>
<p class="nav_txt m1">女士页面</p>
</li>
<li class="nav_list">
<input type="radio" name="nav" id="child" class="nav_radio"/>
<label for="child" class="nav_title">儿童</label>
<p class="nav_txt m2">儿童页面</p>
</li>
</ul>
</div>
</body>
大致思路是利用 radio和label ，
这种挺简单的.