<title>无标题文档</title>
<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; width:50px; cursor:pointer;} #menu li.tabFocus{ width:50px; font-weight:bold; background-color:#f3f2e7; border:1px solid #666; border-bottom:0; z-index:100; position:relative;} #content{ width:260px; height:80px; padding:10px; background:#f3f4e7; clear:left; border:1px solid #666; position:relative; top:-1px;} #content li{ display:none;} #content li.conFocus{ display:block;}</style><script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript">$(function(){
$("#menu li").each(function(index) { $(this).click(function(){ $("#menu li.tabFocus").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>