选项卡demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style> .wrapper { position: relative; width: 200px; height: 200px; background: pink; text-align: center; } .wrapper div { display: none; position: absolute; top: 75px; left: 75px; } input:checked+div { display: block; } </style> </head> <body> <div class="wrapper"> <input type="radio" name="meimei" checked> <div>好妹妹</div> <input type="radio" name="meimei"> <div>小熊</div> <input type="radio" name="meimei"> <div>小椰汁</div> </div> </body> </html>效果图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3选项卡</title> <style> body, ul, li, a { margin: 0; padding: 0; text-decoration: none; list-style: none; } .wrapper { width: 600px; margin: 0 auto; font-size: 0; } .title ul li { display: inline-block; width: 200px; height: 50px; text-align: center; line-height: 50px; font-size: 20px; background-color: rgb(160, 158, 158, 0.2); } .title ul li label { display: inline-block; width: 200px; height: 50px; line-height: 50px; } .main { background-color: #f7f7f7; } .main ul { padding: 20px 0; display: none; } .main ul li { margin: 10px 50px; } .main ul li a { font-size: 14px; color: #666; } #hot:checked~.main .hot-news, #home:checked~.main .home-news, #international:checked~.main .international-news { display: block; } #hot:checked~.title .hot, #home:checked~.title .home, #international:checked~.title .international { background-color: #f7f7f7; } .wrapper input { display: none; } </style> </head> <body> <div class="wrapper"> <input type="radio" name="tab" id="hot" checked> <input type="radio" name="tab" id="home"> <input type="radio" name="tab" id="international"> <nav class="title"> <ul> <li class="hot"><label for="hot">热门新闻</label></li> <li class="home"><label for="home">国内新闻</label></li> <li class="international"><label for="international">国际新闻</label></li> </ul> </nav> <div class="main"> <ul class="hot-news"> <li> <a href="javascript:;">如果方向一致，两个命中注定要结伴同行的过客是不会擦肩而过的。</a> </li> <li> <a href="javascript:;">爱旅行就去旅行，大不了有多少钱就走多远的路</a> </li> <li> <a href="javascript:;">每个硬着骨头敢拼敢搏的人都有个柔软的理由。</a> </li> <li><a href="javascript:;">真的喜欢，就别抗拒遗憾。</a></li> </ul> <ul class="home-news"> <li> <a href="javascript:;">我可是你手中那一朵鲜花</a> </li> <li> <a href="javascript:;">我说今晚月光那么美，你说是的</a> </li> <li> <a href="javascript:;">送你一朵山茶花</a> </li> <li><a href="javascript:;">请在春天回来好吗</a></li> </ul> <ul class="international-news"> <li> <a href="javascript:;">我的山坡开满了花</a> </li> <li> <a href="javascript:;">我会亲手为你摘下</a> </li> <li> <a href="javascript:;">请你带回你风中的家</a> </li> <li><a href="javascript:;">你好妹妹</a></li> </ul> </div> </div> </body> </html>效果图：
