<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ font-size: 13px; } ul,li{ margin: 0; padding: 0; list-style-type: none; } #menu li{ text-align: center; float: left; padding: 5px; margin-right: 2px; width: 50px; cursor:pointer; } #menu .tabFocus { width: 50px; font-weight: bold; background-color: #f3f2e7; border: 1px solid #666666; border-bottom: 0; z-index: 100; position: relative; } #content { width: 260px; height: 80px; padding: 10px; background-color: #f3f2e7; clear: left; border: 1px solid #666666; position: relative; top: -1px; } #content li { display: none; } #content .conFocus { display: block; } </style> <script src="../js/jquery-3.5.1.js"></script> <script> $(function () { $("#menu li").each(function (index) { $(this).click(function () { $("#menu li").removeClass("tabFocus"); $(this).addClass("tabFocus"); $("#content li:eq(" index ")").show() .siblings().hide(); }); }); }); </script> </head> <body> <ul id="menu"> <li class="tabFocus">家居</li> <li>电器</li> <li>二手</li> </ul> <ul id="content"> <li class="conFocus">我是家的内容</li> <li>欢迎来到电器城</li> <li>二手市场，产品丰富</li> </ul> </body> </html>