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;
 width:760px;
 margin:0 auto;
 font-size:1px;
}
.g{width:585px;float:left;padding:0;clear:both;margin:0 auto;}
#tab_title{width:585px; float:left;}
#tab_title ul{margin:0 auto;list-style:none;}
#tab_title ul li{float:left;height:22px;}
.g1{width:583px;margin:0 auto; padding:0;float:left;border-bottom:1px #5DD3FF solid;border-left:1px #5DD3FF solid;border-right:1px #5DD3FF solid;}
.g01{
    width:260px;
 float:left;
 padding:0px;
 margin:0 auto;
}
.g01_titlesub{
    width:250px;
 height:14px;
 padding:9px;
 text-align:left;
}
.g01_info{
    width:268px;
 text-align:left;
}
.gline{
    width: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);width:56px; CURSOR: pointer" onmouseover="showtab(2,1,10)">抗生素</li>
<li id="2_2" style="background-image:url(images/yf_47bg.gif);width:56px; CURSOR: pointer" onmouseover="showtab(2,2,10)">心血管</li>
<li id="2_3" style="background-image:url(images/yf_47bg.gif);width:56px; CURSOR: pointer" onmouseover="showtab(2,3,10)">肿  瘤</li>
<li id="2_4" style="background-image:url(images/yf_50bg.gif);width:63px; CURSOR: pointer" onmouseover="showtab(2,4,10)">消化代谢</li>
<li id="2_5" style="background-image:url(images/yf_50bg.gif);width:63px; CURSOR: pointer" onmouseover="showtab(2,5,10)">神经系统</li>
<li id="2_6" style="background-image:url(images/yf_50bg.gif);width:63px; CURSOR: pointer" onmouseover="showtab(2,6,10)">呼吸系统</li>
<li id="2_7" style="background-image:url(images/yf_50bg.gif);width:63px; CURSOR: pointer" onmouseover="showtab(2,7,10)">骨骼肌肉</li>
<li id="2_8" style="background-image:url(images/yf_47bg.gif);width:56px; CURSOR: pointer" onmouseover="showtab(2,8,10)">皮肤病</li>
<li id="2_9" style="background-image:url(images/yf_47bg.gif);width:56px; CURSOR: pointer" onmouseover="showtab(2,9,10)">综  合</li>
<li id="2_10" style="background-image:url(images/yf_48bg.gif);width: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>

posted on 2008-05-13 16:47  chuncn  阅读(1125)  评论(0编辑  收藏  举报

导航