<style> *{ margin: 0; padding: 0; text-decoration: none; list-style: none; outline:none; } .box{ 600px; overflow: hidden; border:1px solid #eee; margin: 50px auto; } .nav{ 600px; } .nav_list{ float:left; 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; 600px; background: white; padding: 20px; } .m1{ margin-left: -100%; } .m2{ margin-left: -200%; } .nav_radio{ display: none; } .nav_radio:checked + .nav_title{ background: #f5f5f5; } .nav_radio:checked ~ .nav_txt{ z-index: 1; } </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 ，
这种挺简单的.