1. <style type="text/css"> 
  2. #Tab1{ 
  3. padding:0px; 
  4. border:1px solid #E4E4E4; 
  5. margin-top:10px 
  6. } 
  7. .Menubox { 
  8. height:30px; 
  9. line-height:30px; 
  10. background:url(../p_w_picpaths/sprite_bg.png) 0 -230px  no-repeat; 
  11. } 
  12. .Menubox ul{ 
  13. margin:0px; 
  14. padding:0px; 
  15. } 
  16. .Menubox li{ 
  17. float:left; 
  18. display:block; 
  19. cursor:pointer; 
  20. width:50%; 
  21. text-align:center; 
  22. background:url(p_w_picpaths/titlebg.gif) 0 -28px no-repeat; 
  23. } 
  24. .Menubox li.mhover{ 
  25. padding:0px; 
  26. background:#fff; 
  27. width:50%; 
  28. color:#A42023; 
  29. font-weight:bold; 
  30. height:30px; 
  31. line-height:30px; 
  32. } 
  33. .Contentbox{ 
  34. clear:both; 
  35. margin-top:0px; 
  36. border-top:none; 
  37. height:250px; 
  38. padding-top:8px; 
  39. }  
  40. </style> 
  41.  
  42. <script type="text/javascript">    
  43. function setTab(name, cursel, n) { 
  44. for (i = 1; i <= n; i++) { 
  45. var menu = document.getElementById(name + i); 
  46. var con = document.getElementById("con_" + name + "_" + i);  
  47. menu.className = i == cursel ? "mhover" : ""; 
  48. con.style.display = i == cursel ? "block" : "none"; 
  49. } 
  50. }       
  51. </script> 
  52.  
  53. <body> 
  54. <div id="Tab1"> 
  55.  <div class="Menubox"> 
  56.      <ul> 
  57.         <li class="mhover" id="one1" οnmοuseοver="setTab('one',1,2)">热门促销 </li> 
  58.         <li id="one2" οnmοuseοver="setTab('one',2,2)">网站公告 </li> 
  59.         </ul> 
  60.     </div> 
  61.     <div class="Contentbox"> 
  62.      <div id="con_one_1"> 
  63.         abc 
  64.         </div> 
  65.         <div id="con_one_2" style="display: none"> 
  66.         efd 
  67.         </div> 
  68.     </div> 
  69. </div>  
  70. </body>