<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS选项卡</title> <style> * { margin: 0; padding: 0; } body{ background: #83B76B; } #main{ width:800px; height: 400px; margin:50px auto; } #con{ width:700px; height: 300px; margin: 30px auto; color: #fff; } input{ display: none; } label{ width:100px; height: 40px; line-height: 40px; text-align: center; background: #6A9E52; display: inline-block; } label:nth-of-type(1){ margin-left: 50px; } #con .text{ background-color: #376B1F; text-indent: 2em; line-height: 40px; display: none; } input:checked+label{ /*input被选中 找到后面的labal*/ background-color: #376B1F; } /*第一个input被选中,找到后面的div名字text的第一个元素*/ input:checked:nth-of-type(1)~div.text:nth-of-type(1){ display: block !important; } /*第二个input被选中,找到后面的div名字text的第二个元素*/ input:checked:nth-of-type(2)~div.text:nth-of-type(2){ display: block !important; } </style> </head> <body> <div id="main"> <h1>CSS选项卡</h1> <div id="con"> <input type="radio" name="radio" id="radio1" checked> <label for="radio1">选项卡1</label> <input type="radio" name="radio" id="radio2"> <label for="radio2">选项卡2</label> <div class="text"> 四月,醉一场青春的流年。慢步在四月的春光里,走走停停,看花开嫣然,看春雨绵绵,感受春风拂面,春天,就是青春的流年。青春,是人生中最美的风景。青春,是一场花开的遇见;青春,是一场痛并快乐着的旅行;青春,是一场轰轰烈烈的比赛;青春,是一场鲜衣奴马的争荣岁月;青春,是一场风花雪月的光阴。 </div> <div class="text"> 青春往事,多么甜蜜;青春岁月,多么靓丽;青春流年,如火如荼。青春里,我们向着梦想前进。跌倒过,伤心过,快乐过,痛苦过,孤独过,彷徨过,迷茫过。总是,在悠悠的岁月中徘徊;总是,在如春的生命中成长;总是,在季节的交替中感悟人生四季的美妙与韵律;总是,在多愁善感中体悟青春的美好与无奈。 </div> </div> </div> </body> </html>