css
1 ul,li 2 { 3 margin:0px; 4 padding:0px; 5 list-style-type:none; 6 } 7 #menu li 8 { 9 text-align:center; 10 float:left; 11 padding:5px; 12 margin-right:2px; 13 width:50px; 14 cursor:pointer; 15 } 16 #menu li.tabFocus 17 { 18 background-color:#f3f2e7; 19 border:solid 1px #666; 20 border-bottom:0; 21 z-index:100; 22 position:relative; 23 } 24 #content 25 { 26 width:260px; 27 height:80px; 28 padding:10px; 29 clear:left; 30 background-color:#f3f2e7; 31 border:solid 1px #666; 32 position:relative; 33 top:-1px; 34 } 35 #content li{display:none;} 36 #content li.conFocus{display:block;}
js
<script type="text/javascript"> jQuery(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>
测试代码
1 <ul id="menu"> 2 <li class="tabFocus">家电</li> 3 <li>厨房</li> 4 <li>产品</li> 5 </ul> 6 <ul id="content"> 7 <li class="conFocus">家电1</li> 8 <li>厨房2</li> 9 <li>产品3</li> 10 </ul>
结果图