查看: 968|回复: 0

标准布局应用:选项卡

[复制链接]
发表于 2013-10-20 16:38:17 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>标准布局应用:选项卡</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta name="Author" content="PR" />
  8. <style type="text/css">
  9. /* 选项卡关键属性 */
  10. #tab {width:1189px;height:260px;position:relative; margin:0 auto;}

  11. /*设置容器高宽等*/
  12. html > body #tab {width:1189px;}

  13. /*兼容IE6:IE6下宽度不够*/
  14. #tab div {position:absolute;top:26px;left:0;width:1189px;height:234px;border:solid #eee;border-width:0 1px 1px;}

  15. /*设置容器高宽等*/
  16. #tab div {display:none;}

  17. /*设置容器默认隐藏:不用ID是因为下面将利用class来控制容器显示,而class优先级低于id选择器*/
  18. #tab .block {display:block;}

  19. /*选中的容器*/
  20. #tab h3 {float:left;width:290px;height:26px;line-height:26px;
  21. margin:0 -1px 0 0;font-size:14px;cursor:pointer;font-weight:400;text-align:center;color:#00007F;background:#eee url(/upload/teaching/tab.gif)no-repeat;}

  22. /*默认标题样式*/
  23. #tab .up {background:#fff url(/upload/teaching/tab1.gif) no-repeat;}
  24. </style>

  25. </head>
  26. <body>
  27. <div id="tab">
  28.   <h3 class="up" onmousemove="go_to(1);">促销专场</h3>
  29.   <div class="block">
  30.    <img src="images/cuxiaozhuanchang1.jpg"/>
  31.   </div>
  32.   <h3 onmousemove="go_to(2);">热销女用</h3>
  33.   <div>
  34.     <img src="111" width="1189" height="300"/>
  35.   </div>
  36.   <h3 onmousemove="go_to(3);">热销男用</h3>
  37.   <div>
  38.    <img src="111" width="1189" height="300"/>
  39.   </div>
  40.   <h3 onmousemove="go_to(4);">最新品牌</h3>
  41.   <div>
  42.    <img src="111" width="1189" height="300"/>
  43.   </div>

  44.   <script type="text/javascript">
  45. <!--
  46. var h=document.getElementById("tab").getElementsByTagName("h3");
  47. var d=document.getElementById("tab").getElementsByTagName("div");
  48. function go_to(ao){
  49.   for(var i=0;i<h.length;i++){
  50.    if(ao-1==i){
  51.    h[i].className+=" up";
  52.    d[i].className+=" block";
  53.    }
  54.    else {
  55.    h[i].className=" ";
  56.    d[i].className=" ";
  57.    }
  58.   }
  59. }
  60. //-->
  61. </script>
  62. </div>
  63. </body>
  64. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

金灿互联专注为企业提供系统整体的网络营销外包服务,包括从营销型网站平台建设、阿里旺铺装修、网站SEO优化推广、B2B平台推广等一站式网络营销服务。已为近1000多家企业提供高品质的网站建设和营销推广服务,帮助客户通过互联网提升业绩、抢占市场、成就品牌。
© 2010-2016 Comsenz Inc. 粤ICP备12054404号-1 Powered by KingCan!X3.2   
快速回复 返回顶部 返回列表