css实现的tab切换(用a href跳转实现的假象,一般用于目录对应于内容的跳转)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body{text-align: center;} .nav{width: 165px;} .nav li{width:50px;height: 30px;float: left;list-style: none;margin-left: 5px;} .nav li a{width:50px;height: 30px;background-color: #ffff00;display: block;} .box{width: 200px;height: 200px;overflow: hidden;} .box li{width: 200px;height: 200px;float: left;background-color: #008000;list-style: none;} .box li:nth-child(2){background-color: #0000ff;} </style> </head> <body> <ul class="nav"> <li><a href="#box1">1</a></li> <li><a href="#box2">2</a></li> <li><a href="#box3">3</a></li> </ul> <ul class="box"> <li id="box1">1</li> <li id="box2">2</li> <li id="box3">3</li> </ul> </body> </html>