• DIV应用之显示与隐藏


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    <!--
    .jianxi {
                   height:6px;
     760px;
     margin:0 auto;
     font-size:1px;
    }
    .g{585px;float:left;padding:0;clear:both;margin:0 auto;}
    #tab_title{585px; float:left;}
    #tab_title ul{margin:0 auto;list-style:none;}
    #tab_title ul li{float:left;height:22px;}
    .g1{583px;margin:0 auto; padding:0;float:left;border-bottom:1px #5DD3FF solid;border-left:1px #5DD3FF solid;border-right:1px #5DD3FF solid;}
    .g01{
        260px;
     float:left;
     padding:0px;
     margin:0 auto;
    }
    .g01_titlesub{
        250px;
     height:14px;
     padding:9px;
     text-align:left;
    }
    .g01_info{
        268px;
     text-align:left;
    }
    .gline{
        25px;
        height:200px;
        float:left;
     border-right:1px #5DD3FF solid;
    }
    -->
    </style>
    </head>
    <body>
    111111111
    <div class="jianxi"></div>
    111111111111
    <div class="g">
    <div id="tab_title">
    <ul>
    <li id="2_1" style="background-image:url(images/yf_47.gif);56px; CURSOR: pointer" onmouseover="showtab(2,1,10)">抗生素</li>
    <li id="2_2" style="background-image:url(images/yf_47bg.gif);56px; CURSOR: pointer" onmouseover="showtab(2,2,10)">心血管</li>
    <li id="2_3" style="background-image:url(images/yf_47bg.gif);56px; CURSOR: pointer" onmouseover="showtab(2,3,10)">肿  瘤</li>
    <li id="2_4" style="background-image:url(images/yf_50bg.gif);63px; CURSOR: pointer" onmouseover="showtab(2,4,10)">消化代谢</li>
    <li id="2_5" style="background-image:url(images/yf_50bg.gif);63px; CURSOR: pointer" onmouseover="showtab(2,5,10)">神经系统</li>
    <li id="2_6" style="background-image:url(images/yf_50bg.gif);63px; CURSOR: pointer" onmouseover="showtab(2,6,10)">呼吸系统</li>
    <li id="2_7" style="background-image:url(images/yf_50bg.gif);63px; CURSOR: pointer" onmouseover="showtab(2,7,10)">骨骼肌肉</li>
    <li id="2_8" style="background-image:url(images/yf_47bg.gif);56px; CURSOR: pointer" onmouseover="showtab(2,8,10)">皮肤病</li>
    <li id="2_9" style="background-image:url(images/yf_47bg.gif);56px; CURSOR: pointer" onmouseover="showtab(2,9,10)">综  合</li>
    <li id="2_10" style="background-image:url(images/yf_48bg.gif);53px; CURSOR: pointer" onmouseover="showtab(2,10,10)">其  他</li>
    </ul>
    </div>
    <div class="g1" id="tab_2_1">
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=抗生素动态" target="_blank">动 态</a></strong></div>
      <div class="g01_info font14">{$MY_NumClassIdKeywordtoResearch(8,1010,抗生素动态)}
      </div>
    </div>
    <div  class="gline"></div>
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=抗生素新产品" target="_blank">新产品</a></strong></div>
      <div class="g01_info font14">{$MY_allkeyword(8,抗生素新产品)}
      </div>
    </div>
    </div>
    <!--心血管-->
    <div class="g1" id="tab_2_2" style="display:none">
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10">&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=心血管动态" target="_blank">动 态</a></strong></div>
      <div class="g01_info font14">{$MY_NumClassIdKeywordtoResearch(8,1010,心血管动态)}
      </div>
    </div>
    <div class="gline"></div>
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10">&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=心血管新产品" target="_blank">新产品</a></strong></div>
      <div class="g01_info font14">{$MY_allkeyword(8,心血管新产品)}
      </div>
    </div>
    </div>
    <!--肿 瘤-->
    <div class="g1" id="tab_2_3" style="display:none">
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=肿瘤动态" target="_blank">动 态</a></strong></div>
      <div class="g01_info font14">{$MY_NumClassIdKeywordtoResearch(8,1010,肿瘤动态)}
      </div>
    </div>
    <div class="gline"></div>
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=肿瘤新新产品" target="_blank">新产品</a></strong></div>
      <div class="g01_info font14">{$MY_allkeyword(8,肿瘤新产品)}
      </div>
    </div>
    </div>
    <!--消化代谢-->
    <div class="g1" id="tab_2_4" style="display:none">
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=消化系统动态" target="_blank">动 态</a></strong></div>
      <div class="g01_info font14">{$MY_NumClassIdKeywordtoResearch(8,1010,消化系统动态)}
      </div>
    </div>
    <div  class="gline"></div>
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=消化系统新产品" target="_blank">新产品</a></strong></div>
      <div class="g01_info font14">{$MY_allkeyword(8,消化系统新产品)}
      </div>
    </div>
    </div>
    <!--神经系统-->
    <div class="g1" id="tab_2_5" style="display:none">
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=神经系统动态" target="_blank">动 态</a></strong></div>
      <div class="g01_info font14">{$MY_NumClassIdKeywordtoResearch(8,1010,神经系统动态)}
      </div>
    </div>
    <div  class="gline"></div>
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=神经系统新产品" target="_blank">新产品</a></strong></div>
      <div class="g01_info font14">{$MY_allkeyword(8,神经系统新产品)}
      </div>
    </div>
    </div>
    <!--呼吸系统-->
    <div class="g1" id="tab_2_6" style="display:none">
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=呼吸系统动态" target="_blank">动 态</a></strong></div>
      <div class="g01_info font14">{$MY_NumClassIdKeywordtoResearch(8,1010,呼吸系统动态)}
      </div>
    </div>
    <div  class="gline"></div>
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=呼吸系统新产品" target="_blank">新产品</a></strong></div>
      <div class="g01_info font14">{$MY_allkeyword(8,呼吸系统新产品)}
      </div>
    </div>
    </div>
    <!--骨骼肌肉-->
    <div class="g1" id="tab_2_7" style="display:none">
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=骨骼肌肉动态" target="_blank">动 态</a></strong></div>
      <div class="g01_info font14">{$MY_NumClassIdKeywordtoResearch(8,1010,骨骼肌肉动态)}
      </div>
    </div>
    <div  class="gline"></div>
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=骨骼肌肉新产品" target="_blank">新产品</a></strong></div>
      <div class="g01_info font14">{$MY_allkeyword(8,骨骼肌肉新产品)}
      </div>
    </div>
    </div>
    <!--皮肤病-->
    <div class="g1" id="tab_2_8" style="display:none">
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=皮肤病动态" target="_blank">动 态</a></strong></div>
      <div class="g01_info font14">{$MY_NumClassIdKeywordtoResearch(8,1010,皮肤病动态)}
      </div>
    </div>
    <div  class="gline"></div>
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=皮肤病新产品" target="_blank">新产品</a></strong></div>
      <div class="g01_info font14">{$MY_allkeyword(8,皮肤病新产品)}
      </div>
    </div>
    </div>
    <!--综 合 -->
    <div class="g1" id="tab_2_9" style="display:none">
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=综合动态" target="_blank">动 态</a></strong></div>
      <div class="g01_info font14">{$MY_NumClassIdKeywordtoResearch(8,1010,综合动态)}
      </div>
    </div>
    <div  class="gline"></div>
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=综合新产品" target="_blank">新产品</a></strong></div>
      <div class="g01_info font14">{$MY_allkeyword(8,综合新产品)}
      </div>
    </div>
    </div>
    <!--其 他-->
    <div class="g1" id="tab_2_10" style="display:none">
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=其他动态" target="_blank">动 态</a></strong></div>
      <div class="g01_info font14">{$MY_NumClassIdKeywordtoResearch(8,1010,其它动态)}
      </div>
    </div>
    <div  class="gline"></div>
    <div class="g01">
      <div class="g01_titlesub"><img src="images/yf_24.gif" width="10" height="10" />&nbsp;&nbsp;<strong><a href="http://www.hyey.com/yanfa/search.asp?Field=Keywords&ClassID=&keyword=其他新产品" target="_blank">新产品</a></strong></div>
      <div class="g01_info font14">{$MY_allkeyword(8,其它新产品)}
      </div>
    </div>
    </div>
    </div><script language="JavaScript" type="text/javascript">
    <!--
    function showtab(m,n,count){
     var strPic1='url(images/yf_47.gif)';
     var strPic2='url(images/yf_47bg.gif)';
       if (m==2&&n==10) {
     strPic1='url(images/yf_48.gif)';
     }
     for(var i=1;i<=count;i++){
      if (i==4||i==5||i==6||i==7) {
     strPic1='url(images/yf_50.gif)';
     strPic2='url(images/yf_50bg.gif)';
     }else if(i==8||i==9)
     {
     strPic1='url(images/yf_47.gif)';
     strPic2='url(images/yf_47bg.gif)';
     }
      if (i==n){   
       getObject(m+'_'+i).style.background=strPic1;
       getObject('tab_'+m+'_'+i).style.display='';   
       }
      else {
       getObject(m+'_'+i).style.background=strPic2;
       getObject('tab_'+m+'_'+i).style.display='none';
       }
     }
    }
    function getObject(objectId) {
        if(document.getElementById && document.getElementById(objectId)) {
     // W3C DOM
     return document.getElementById(objectId);
        } else if (document.all && document.all(objectId)) {
     // MSIE 4 DOM
     return document.all(objectId);
        } else if (document.layers && document.layers[objectId]) {
     // NN 4 DOM.. note: this won't find nested layers
     return document.layers[objectId];
        } else {
     return false;
        }
    } // getObject
    //-->
            </script>
    </body>
    </html>
  • 相关阅读:
    实习日记7.28
    实习日记7.27
    实习总结(第三周)
    实习日记7.26
    实习日记7.25
    实习总结(第二周)
    实习总结(第一周)
    实习日记7.22
    实习日记7.21
    5月4下
  • 原文地址:https://www.cnblogs.com/chuncn/p/1195427.html
Copyright © 2020-2023  润新知