方法一、利用a標(biāo)簽的錨點(diǎn)實(shí)現(xiàn)tab切換
（推薦教程：css教程）
代碼如下：
<!doctype html><html><head><meta charset="utf-8"> <title>csstab切換2</title> <style type="text/css"> *{ margin: 0; padding: 0; text-decoration: none; } .tab{ width: 300px; height: 300px; margin: 30px auto; overflow: hidden; } .nav{ height: 30px } .content{ height: 270px; overflow: hidden; } .cont{ height: 270px; } #the1{ background: green; } #the2{ background: blue; } </style></head><body><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></body></html>（學(xué)習(xí)視頻推薦：css視頻教程）
方法二、利用radio按鈕和:checked選擇器
代碼如下：
<!doctype html><html><head><meta charset="utf-8"> <title>純css實(shí)現(xiàn)tab切換</title> <style type="text/css"> *{ 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; } .tab label{ display: block; cursor: pointer; 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; } input[type='radio']:checked~div[class^='mod']{ display: block; } input[type='radio']:checked~label{ background: orange; } [class^='mod']{ position: absolute; top: 40px; left: 20px; display: none; } </style></head><body> <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>總價(jià)20萬買一居</li> <li>200萬內(nèi)購五環(huán)三居</li> <li>北京首現(xiàn)零首付樓盤</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>深圳房價(jià)大跌,每平8w</li> <li>800萬買沙井三房</li> <li>寶安房價(jià)平均900w</li> </ul> </div> </div> </div></body></html>