╋艺 镇╋╋网站网络|程序语言|Flash╋┣◇网站建设&Web语言 → div 切换效果 往下弹的问题


  共有21356人关注过本帖树形打印复制链接

主题:div 切换效果 往下弹的问题

美女呀,离线,留言给我吧!
admin
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 司令 亲民勋章
等级:管理员 帖子:3027 积分:27521 威望:0 精华:7 注册:2003/12/30 16:34:32
div 切换效果 往下弹的问题  发帖心情 Post By:2009/9/16 22:00:54 [显示全部帖子]

html内容

<div class="no1">
   <DIV class=Tab id=box03_leftTab1>
<DIV class=Tab_title><A style="margin-left:5px;">资源价格</A>
<DIV class=Menubox>
<UL>
  <LI class=acquiesce id=js1 ><A
  href="http://www.chinazyxx.com/1/Nlist_1,10,11.aspx">钢材</A> </LI>
  <LI id=js2 ><A
  href="http://www.chinazyxx.com/1/Nlist_1,5,38.aspx">建材</A> </LI>
  <LI id=js3 ><A
  href="http://www.chinazyxx.com/1/Nlist_1,10,13.aspx">塑料</A> </LI>
  <LI id=js4 ><A
  href="http://www.chinazyxx.com/1/Nlist_1,49,50.aspx">木材</A> </LI>
  <LI id=js5 ><A
  href="http://www.chinazyxx.com/1/Nlist_1,9,17.aspx">纸张</A> </LI></UL></DIV></DIV>
<DIV class=Contentbox id=steel1>
<UL class=Contentbox_ul1>
  <LI><A href="http://www.chinazyxx.com/1/View_35220_1,10,11.aspx"
  target=_blank>近期北美钢材市场价格走势简要综述</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35219_1,10,11.aspx"
  target=_blank>近期欧洲钢材市场价格走势简要综述</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35218_1,10,11.aspx"
  target=_blank>近期亚洲钢材市场价格走势简要综述</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35078_1,10,11.aspx"
  target=_blank>越南市场建筑钢材每吨上涨150000盾</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35077_1,10,11.aspx"
  target=_blank>巴西钢铁协会:巴西1季度粗钢产量降42.1%</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35076_1,10,11.aspx"
  target=_blank>约旦钢材需求量突增200%</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35075_1,10,11.aspx"
  target=_blank>印度钢铁需求改善趋势将持续 但钢价不会大幅回升</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35074_1,10,11.aspx"
  target=_blank>越南调整钢材等商品进口优惠税率</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35073_1,10,11.aspx"
  target=_blank>今年头两月世界主要钢出口国出口量降幅明显</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35073_1,10,11.aspx"
  target=_blank>今年头两月世界主要钢出口国出口量降幅明显</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35073_1,10,11.aspx"
  target=_blank>今年头两月世界主要钢出口国出口量降幅明显</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35073_1,10,11.aspx"
  target=_blank>今年头两月世界主要钢出口国出口量降幅明显</A>[04/17/2009] </LI></UL></DIV>
<DIV class=Contentbox id=steel2 style="DISPLAY: none">
<UL class=Contentbox_ul1>
  <LI><A href="http://www.chinazyxx.com/1/View_34946_1,6,38.aspx"
  target=_blank>西北钢市价格小幅震荡</A>[04/16/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34945_1,6,38.aspx"
  target=_blank>天津钢市场价格继续走低</A>[04/16/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34798_1,6,38.aspx"
  target=_blank>国内中厚板价格弱势持稳</A>[04/16/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34797_1,6,38.aspx"
  target=_blank>国内建筑钢材市场价格小幅上涨</A>[04/16/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34796_1,6,38.aspx"
  target=_blank>国内无缝管市场表现的“风平浪静”</A>[04/16/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34795_1,6,38.aspx"
  target=_blank>国内部分型材市场价格以稳为主</A>[04/16/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34666_1,6,38.aspx"
  target=_blank>福州中厚板价格总体平稳</A>[04/16/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34665_1,6,38.aspx"
  target=_blank>青岛地区冷卷价跌50元/吨</A>[04/16/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34664_1,6,38.aspx"
  target=_blank>徐州市场热冷板稳跌并行</A>[04/16/2009] </LI></UL></DIV>
<DIV class=Contentbox id=steel3 style="DISPLAY: none">
<UL class=Contentbox_ul1>
  <LI><A href="http://www.chinazyxx.com/1/View_35273_1,49,51.aspx"
  target=_blank>4月17日华北带钢出厂价格调整信息</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35159_1,49,51.aspx"
  target=_blank>4月17日鞍钢股份无缝管价格表</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35158_1,49,51.aspx"
  target=_blank>2009年包钢集团第五期普通无缝管挂牌价表</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34986_1,49,51.aspx"
  target=_blank>4月16日包钢普通材质无缝管价格表</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34838_1,49,51.aspx"
  target=_blank>梅钢2009年5月热轧产品价格表(H-Q195</A>[04/16/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34837_1,49,51.aspx"
  target=_blank>4月15日莱钢热卷板(宽带钢)出厂价格表</A>[04/16/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34836_1,49,51.aspx"
  target=_blank>4月16日大厂国华冷带价格表</A>[04/16/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34703_1,49,51.aspx"
  target=_blank>2009年4月14日凌源钢铁集团公司产品价格表</A>[04/16/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34682_1,49,51.aspx"
  target=_blank>攀华集团2009年4月份镀锌价格表</A>[04/16/2009] </LI></UL></DIV>
<DIV class=Contentbox id=steel4 style="DISPLAY: none">
<UL class=Contentbox_ul1>
  <LI><A href="http://www.chinazyxx.com/1/View_35272_1,49,50.aspx"
  target=_blank>4月17日莱钢螺纹钢出厂价格调整信息</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35271_1,49,50.aspx"
  target=_blank>4月17日厦门众达钢厂建筑钢材调价信息</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35157_1,49,50.aspx"
  target=_blank>4月17唐山瑞丰日热带调价信息</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35156_1,49,50.aspx"
  target=_blank>4月17日徐州金虹产品出厂价格调整信息</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35155_1,49,50.aspx"
  target=_blank>4月17日天津江天型材出厂价格调整信息</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35154_1,49,50.aspx"
  target=_blank>4月17日凌钢对螺纹钢指导价格调整信息</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35153_1,49,50.aspx"
  target=_blank>4月17日西钢建筑钢材价格调整信息</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35152_1,49,50.aspx"
  target=_blank>4月17日唐山国丰热轧带钢出厂价格调整信息</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35151_1,49,50.aspx"
  target=_blank>4月17日青钢建筑钢材价格调整信息</A>[04/17/2009] </LI></UL></DIV>
<DIV class=Contentbox id=steel5 style="DISPLAY: none">
<UL class=Contentbox_ul1>
  <LI><A href="http://www.chinazyxx.com/1/View_35207_1,9,17.aspx"
  target=_blank>17日天津市场建筑钢材库存统计</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35206_1,9,17.aspx"
  target=_blank>17日北京市场热轧卷板库存统计</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35205_1,9,17.aspx"
  target=_blank>17日北京市场冷轧薄板库存统计</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35204_1,9,17.aspx"
  target=_blank>17日北京市场中厚板库存统计</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35203_1,9,17.aspx"
  target=_blank>17日天津市场中厚板库存统计</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_35202_1,9,17.aspx"
  target=_blank>17日北京市场建筑钢材库存统计</A>[04/17/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34927_1,9,17.aspx"
  target=_blank>16日广州渔珠港市场型材库存统计</A>[04/16/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34926_1,9,17.aspx"
  target=_blank>16日广州渔珠港市场板材库存统计</A>[04/16/2009]
  <LI><A href="http://www.chinazyxx.com/1/View_34925_1,9,17.aspx"
  target=_blank>16日广州渔珠港市场建材库存统计</A>[04/16/2009] </LI></UL></DIV></DIV>

 

 


css部分:


.no1 {width:980px;height:281px;}

#box03_leftTab1 {float:left;width:320px;}
#box03_leftTab1 a{font-size:12px;}

.Tab_title{BACKGROUND: url(images/bluebg.jpg) x-repeat left center;float:left;line-height:25px;width:320px;BORDER-RIGHT: #d1d5c7 1px solid; BORDER-TOP: #d1d5c7 1px solid; BORDER-LEFT: #d1d5c7 1px solid;}
.Tab_title a{width:55px;float:left;font-weight:bold;}
.Menubox{width:255px;line-height:19px;margin-top:6px;padding-left:50px;}
.menubox ul{float:right;padding-right:10px;}
.Menubox li{float:left;list-style-type:none;}
.Menubox li a{width:30px;margin:0 0 0 1px;}
.Menubox .acquiesce {
 BACKGROUND: url(images/smallbg.jpg) no-repeat left center;
}
.Contentbox {float:left;width:320px;height:255px;padding-top:3px;BORDER-RIGHT: #d1d5c7 1px solid;BORDER-LEFT: #d1d5c7 1px solid; BORDER-BOTTOM: #d1d5c7 1px solid;}
.Contentbox_ul1 {}
.Contentbox_ul1 LI {
 PADDING-LEFT: 10px; BACKGROUND: url(images/ico.gif) no-repeat left center; COLOR: #666666; LINE-HEIGHT: 19px; BORDER-BOTTOM: #cccccc 1px dashed; TEXT-ALIGN: right;list-style-type:none;font-size:12px;width:300px;
}
.Contentbox_ul1 LI A {
 FLOAT: left; OVERFLOW: hidden; WIDTH: 200px; COLOR: #2a608d; WHITE-SPACE: nowrap; TEXT-OVERFLOW: ellipsis; TEXT-ALIGN: left; TEXT-DECORATION: none;
}


java部分
<SCRIPT language=javascript type=text/javascript>
function Show(id,mnue,content,Lenths,classname1,classname2)
{
  for(var i=1;i<=Lenths;i++)  
  {
    if(parseInt(id)==i)
    {
     document.getElementById(content+i).style.display="";
     document.getElementById(mnue+i).className=classname1;
   }
   else
   {
     document.getElementById(content+i).style.display="none";
     document.getElementById(mnue+i).className=classname2;

   }  
  }
}
</SCRIPT>



  
“艺镇”官方站:www.zyzsky.com QQ群:1221854  回到顶部
美女呀,离线,留言给我吧!
admin
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 司令 亲民勋章
等级:管理员 帖子:3027 积分:27521 威望:0 精华:7 注册:2003/12/30 16:34:32
  发帖心情 Post By:2009/9/16 22:01:11 [显示全部帖子]

以上主要意思就是鼠标移到不同id时,display值会变,所移到的id值对应的div显示,而其他的display为none即不显示

但为什么出现了鼠标移到其他id上时,下面的列表都往下弹了好高距离,而且距离正好是首id下div的高度值,也就是说java没显示出效果,此效果被某个参数挡了,也就是说,切换到其他id时,首id对应的div没隐藏,也就是说无法隐藏,原因可能出在对应的div上什么参数限定了此div不消失,查找后,发现id对应下的div都由这个参数对应.Contentbox {float:left;width:320px;height:255px;padding-top:3px;BORDER-RIGHT: #d1d5c7 1px solid;BORDER-LEFT: #d1d5c7 1px solid; BORDER-BOTTOM: #d1d5c7 1px solid;},仔细分析后,此段代码其他地方都没问题,出在了float:left上,有了这个,他就一直处于浮动状态,而使得java失效。导致在执行java效果时,该显示的div容器被挤到没隐藏掉的div下,因此看到了上面一块白的,下面显示要显示的div的效果了。

本来这个有float的情况在汇通网没插程序的时候,改小列表内的文字数也不会往下弹了,这就不知道为什么了



  
“艺镇”官方站:www.zyzsky.com QQ群:1221854  回到顶部