<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul, li { list-style: none; margin: 0; padding: 0; } .tab {} .tab ul {} .tab ul li { float: left; width: 60px; height: 30px; line-height: 30px; border:1px solid #aaa; text-align: center; border-right:none; border-bottom:none; } .tab ul li:hover{cursor:pointer;} .tab ul li.current{background:orange;} .tab ul li:nth-child(3){border-right:1px solid #aaa;} .tab .content { clear: both; width:350px; height: 200px; border:1px solid #aaa; } .tab .content div { display: none; } .tab .content div.current{display: block;} </style> </head> <body> <div class="tab" id="tab"> <ul class="btn"> <li class="current">新闻</li> <li>娱乐</li> <li>生活</li> </ul> <div class="content"> <div class="current">新闻新闻新闻新闻新闻新闻新闻新闻</div> <div>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</div> <div>生活生活生活生活生活生活生活生活</div> </div> </div> </body> </html>将上述代码补充完整