1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2:  <html xmlns="http://www.w3.org/1999/xhtml">
   3:  <head>
   4:      <title></title>
   5:      <style type="text/css">
   6:      body{font-size:13px;}
   7:      ul,li{margin:0px;padding:0px;list-style:none;}
   8:      #menu li{text-align:center;float:left;padding:5px;margin-right:2px;width:50px;cursor:pointer;}
   9:      #menu li.tabFocus{width:50px;font-weight:bold;background-color:#f3f2e7;border:solid 1px #666;
  10:                        border-bottom:0;z-index:2;position:relative;}
  11:                        /*z-index:2*/
  12:      #content{width:260px;height:80px;padding:10px;background-color:#f3f2e7;clear:left;
  13:               border:solid 1px #666;position:relative;top:-1px;} 
  14:      /*top:-1px非常关键，它让上边界切入到标题栏中，当标题栏的下边界为none，那么那一块边界也就没有了
  15:      z-index:2也是非常地重要，不然tabFocus就无法覆盖下层了。另外注意这个的position:relative
  16:      */
  17:      #content li{display:none} 
  18:      #content li.conFocus{display:block}                         
  19:      
  20:      </style>
  21:      <script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
  22:      <script type="text/javascript">
  23:          $(function () {
  24:              $("#menu li").each(function (index) {
  25:                  $(this).click(function () {
  26:                      $(".tabFocus").removeClass("tabFocus");
  27:                      $(this).addClass("tabFocus");
  28:                      $("#content li:eq(" + index + ")").show().siblings().hide();
  29:   
  30:                  });
  31:   
  32:              });
  33:   
  34:          });
  35:      </script>
  36:  </head>
  37:  <body>
  38:      <ul id="menu">
  39:          <li class="tabFocus">家居</li>
  40:          <li>电器</li>
  41:          <li>二手</li>
  42:      </ul>
  43:      <ul id="content">
  44:          <li class="conFocus">我是家居内容</li>
  45:          <li>欢迎您来到电器</li>
  46:          <li>二手市场产品丰富</li>
  47:      </ul>
  48:  </body>
  49:  </html>

效果图：

image