<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>网页选项卡应用</title> <script src="jquery-2.1.0.js"></script> <style type="text/css"> body { font-size:13px; } ul, li { margin :0; padding:0; list-style:none; } #menu li{ text-align:center; float:left; padding:5px; margin-right:2px; 50px; cursor:pointer; } #menu li .tabFocus { 50px; font-weight:bold; background-color:#f3f2e7; border:1px solid #666; border-bottom:0; z-index:100; position:relative; } #content { 260px; height: 90px; padding: 10px; background-color: #00ff21; clear: left; border: 1px solid #666; position: relative; top:-1px; } #content li { display:none; } #content li .conFocus {display:block; } </style> <script type="text/javascript"> $(function () { $("#menu li").each(function (index) { $(this).click(function () { $("#menu li .tabFocus").removeClass("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>