一、overflow大法

心法：控制尺寸，超出部分用overflow：hidden砍掉。

<div class="tab"><div class="nav"><a href="#the1">ONE</a><a href="#the2">TWO</a></div><div class="content"><div id="the1" class="cont">第一张</div><div id="the2" class="cont">第二张</div></div>
</div>

   .tab{width: 300px;height: 300px;}.nav{height: 30px}.content{height: 270px;padding-bottom: 50px;border-bottom: solid 20px red;overflow: hidden;}.cont{height: 270px;}#the1{background: green;}#the2{background: blue;}

小提示：overflow的作用范围，是width和padding，margin与border不包括。

二、radio大法

心法：用radio与label配合，结合：checked，使label被点击时控制内容部分的display。

<div class="tab"><div><input type="radio" id="r-1" name="tab" checked><label for="r-1" class="label-1">第一张</label><div class="mod-1"><ul><li>275万购昌平邻铁三居</li><li>总价20万买一居</li><li>200万内购五环三居</li><li>北京首现零首付楼盘</li></ul></div></div><div><input type="radio" id="r-2" name="tab"><label for="r-2" class="label-2">第二张</label><div class="mod-2"><ul><li>新中式的酷色温情</li><li>深圳房价大跌,每平8W</li><li>800万买沙井三房</li><li>宝安房价平均900W</li></ul></div></div>     </div>

       *{margin: 0;padding: 0;}.tab{width: 300px;height: 150px;margin-left: 30px;margin-top: 30px;border: 1px solid #eee;position: relative;overflow: hidden;}input[type='radio']{display: none;}input[type='radio']:checked~div[class^='mod']{display: block;}input[type='radio']:checked~label{background: orange;}.tab label{position: absolute;width: 60px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #eee;}.label-1{left: 0;top: 0;}.label-2{left: 60px;top: 0;}       [class^='mod']{position: absolute;top: 40px;left: 20px;display: none;}