Heim >Web-Frontend >CSS-Tutorial >So implementieren Sie den Tab-Wechsel in CSS
Methode 1. Verwenden Sie den Ankerpunkt des a-Tags, um einen Tab-Wechsel zu erreichen
(Empfohlenes Tutorial: CSS-Tutorial)
Der Code lautet wie folgt:
<!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>
(Empfohlenes Lernvideo: css-Video-Tutorial )
Methode 2, Verwendung des Optionsfelds und des :markierten Selektors
Der Code lautet wie folgt:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>纯css实现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>总价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> </body> </html>
Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Tab-Wechsel in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!