zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    SQLMAP注入教程-11种常见SQLMAP使用方法详解
    VS2012/2013/2015/Visual Studio 2017 关闭单击文件进行预览的功能
    解决 IIS 反向代理ARR URLREWRITE 设置后,不能跨域跳转 return Redirect 问题
    Spring Data JPA one to one 共享主键关联
    JHipster 问题集中
    Spring Data JPA 定义超类
    Spring Data JPA查询关联数据
    maven命名
    maven仓库
    Jackson读取列表
  • 原文地址:https://www.cnblogs.com/chuncn/p/1195427.html
Copyright © 2011-2022 走看看