您的位置:首页 > 其它

DIV应用之显示与隐藏

2008-05-13 16:47 204 查看
<!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" />  <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" />  <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">  <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">  <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" />  <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" />  <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" />  <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" />  <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" />  <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" />  <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" />  <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" />  <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" />  <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" />  <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" />  <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" />  <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" />  <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" />  <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" />  <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" />  <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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: