CSS+JS实现切换标签的问题
遇到个很奇怪的问题,切换标签出现的。在内容(一共)少于5的时候,第二个标签要往下拖,只在IE6中出现。下面是代码,希望高手指点。<!DOCTYPEHTMLPUBLIC"-...
遇到个很奇怪的问题,切换标签出现的。在内容(一共)少于5的时候,第二个标签要往下拖,只在IE6中出现。下面是代码,希望高手指点。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<style>
#youhui {
BORDER-RIGHT: #6893cf 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #6893cf 1px solid; PADDING-LEFT: 0px; FLOAT: left; BACKGROUND-IMAGE: url(../images/cuxiao_bg.gif); PADDING-BOTTOM: 0px; MARGIN: 0px 0px 5px; OVERFLOW: hidden; BORDER-LEFT: #6893cf 1px solid; WIDTH: 723px; PADDING-TOP: 0px; BORDER-BOTTOM: #6893cf 1px solid; BACKGROUND-REPEAT: repeat-x; HEIGHT: 255px
}
#youhui_bg {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 10px 0px 5px 10px; WIDTH: 313px; PADDING-TOP: 0px; HEIGHT: 240px
}
.cuxiao_menu {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(../images/cuxiao_btn.gif) #ffffff no-repeat; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 171px; COLOR: #463d8d; PADDING-TOP: 0px; HEIGHT: 26px
}
.cuxiao_menu_li {
DISPLAY: inline; FLOAT: left; MARGIN: 8px -2px 0px 2px; WIDTH: 85px; TEXT-ALIGN: center
}
A.cuxiao_con_link:link {
FONT-SIZE: 12px; WIDTH: 85px; COLOR: #463d8d; TEXT-DECORATION: none; heigth: 26px
}
A.cuxiao_con_link:hover {
FONT-SIZE: 12px; COLOR: #463d8d; TEXT-DECORATION: underline
}
A.cuxiao_con_link:visited {
FONT-SIZE: 12px; COLOR: #463d8d; TEXT-DECORATION: none
}
.cuxiao_menu_bg1 {
BACKGROUND-POSITION: 0px 0px
}
.cuxiao_menu_bg2 {
BACKGROUND-POSITION: 0px -26px
}
.cuxiaomenu_text {
FONT-SIZE: 12px; COLOR: #0b0356; TEXT-DECORATION: none
}
.cuxiao_con {
BORDER-RIGHT: #015d9d 1px solid; BORDER-TOP: #015d9d 1px solid; FONT-SIZE: 12px; FLOAT: left; MARGIN: 0px; OVERFLOW: hidden; BORDER-LEFT: #015d9d 1px solid; WIDTH: 310px; COLOR: #463d8d; LINE-HEIGHT: 20px; BORDER-BOTTOM: #015d9d 1px solid; HEIGHT: 212px; TEXT-ALIGN: left
}
.cuxiao_con_ul {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px 0px 0px 5px; OVERFLOW: hidden; WIDTH: 301px; PADDING-TOP: 0px; HEIGHT: 200px
}
</style>
<UL class="cuxiao_menu cuxiao_menu_bg1" id=cuxiaomenu>
<LI class="cuxiao_menu_li cuxiaomenu_text" style="LIST-STYLE-TYPE: none"><A class=cuxiaomenu_text onmouseover=javascript:cuxiao(1) style="CURSOR: hand" target=_blank>热门促销</A></LI>
<LI class="cuxiao_menu_li cuxiaomenu_text" style="LIST-STYLE-TYPE: none"><A class=cuxiaomenu_text onmouseover=javascript:cuxiao(2) style="CURSOR: hand" target=_blank>推荐促销</A> </LI></UL>
<DIV class=cuxiao_con id=cuxiao_con1 style="DISPLAY: block">
<UL class=cuxiao_con_ul>
<LI style="FONT-SIZE: 12px; COLOR: #463d8d; LIST-STYLE-TYPE: none">· 总消费8.8折</LI>
</UL></DIV>
<DIV class=cuxiao_con id=cuxiao_con2 style="DISPLAY: none">
<UL class=cuxiao_con_ul>
<LI style="FONT-SIZE: 12px; COLOR: #463d8d; LIST-STYLE-TYPE: none">· 总消费8.8折</LI>
</UL></DIV></DIV> 展开
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<style>
#youhui {
BORDER-RIGHT: #6893cf 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #6893cf 1px solid; PADDING-LEFT: 0px; FLOAT: left; BACKGROUND-IMAGE: url(../images/cuxiao_bg.gif); PADDING-BOTTOM: 0px; MARGIN: 0px 0px 5px; OVERFLOW: hidden; BORDER-LEFT: #6893cf 1px solid; WIDTH: 723px; PADDING-TOP: 0px; BORDER-BOTTOM: #6893cf 1px solid; BACKGROUND-REPEAT: repeat-x; HEIGHT: 255px
}
#youhui_bg {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 10px 0px 5px 10px; WIDTH: 313px; PADDING-TOP: 0px; HEIGHT: 240px
}
.cuxiao_menu {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(../images/cuxiao_btn.gif) #ffffff no-repeat; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 171px; COLOR: #463d8d; PADDING-TOP: 0px; HEIGHT: 26px
}
.cuxiao_menu_li {
DISPLAY: inline; FLOAT: left; MARGIN: 8px -2px 0px 2px; WIDTH: 85px; TEXT-ALIGN: center
}
A.cuxiao_con_link:link {
FONT-SIZE: 12px; WIDTH: 85px; COLOR: #463d8d; TEXT-DECORATION: none; heigth: 26px
}
A.cuxiao_con_link:hover {
FONT-SIZE: 12px; COLOR: #463d8d; TEXT-DECORATION: underline
}
A.cuxiao_con_link:visited {
FONT-SIZE: 12px; COLOR: #463d8d; TEXT-DECORATION: none
}
.cuxiao_menu_bg1 {
BACKGROUND-POSITION: 0px 0px
}
.cuxiao_menu_bg2 {
BACKGROUND-POSITION: 0px -26px
}
.cuxiaomenu_text {
FONT-SIZE: 12px; COLOR: #0b0356; TEXT-DECORATION: none
}
.cuxiao_con {
BORDER-RIGHT: #015d9d 1px solid; BORDER-TOP: #015d9d 1px solid; FONT-SIZE: 12px; FLOAT: left; MARGIN: 0px; OVERFLOW: hidden; BORDER-LEFT: #015d9d 1px solid; WIDTH: 310px; COLOR: #463d8d; LINE-HEIGHT: 20px; BORDER-BOTTOM: #015d9d 1px solid; HEIGHT: 212px; TEXT-ALIGN: left
}
.cuxiao_con_ul {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px 0px 0px 5px; OVERFLOW: hidden; WIDTH: 301px; PADDING-TOP: 0px; HEIGHT: 200px
}
</style>
<UL class="cuxiao_menu cuxiao_menu_bg1" id=cuxiaomenu>
<LI class="cuxiao_menu_li cuxiaomenu_text" style="LIST-STYLE-TYPE: none"><A class=cuxiaomenu_text onmouseover=javascript:cuxiao(1) style="CURSOR: hand" target=_blank>热门促销</A></LI>
<LI class="cuxiao_menu_li cuxiaomenu_text" style="LIST-STYLE-TYPE: none"><A class=cuxiaomenu_text onmouseover=javascript:cuxiao(2) style="CURSOR: hand" target=_blank>推荐促销</A> </LI></UL>
<DIV class=cuxiao_con id=cuxiao_con1 style="DISPLAY: block">
<UL class=cuxiao_con_ul>
<LI style="FONT-SIZE: 12px; COLOR: #463d8d; LIST-STYLE-TYPE: none">· 总消费8.8折</LI>
</UL></DIV>
<DIV class=cuxiao_con id=cuxiao_con2 style="DISPLAY: none">
<UL class=cuxiao_con_ul>
<LI style="FONT-SIZE: 12px; COLOR: #463d8d; LIST-STYLE-TYPE: none">· 总消费8.8折</LI>
</UL></DIV></DIV> 展开
展开全部
<DIV id=youhui><DIV id=youhui_bg>
<SCRIPT language=javascript>
function cuxiao(num){for(var id = 1;id<=2;id++)
{var Mrm="cuxiao_con"+id;
if(id==num)
document.getElementById(Mrm).style.display="block";
else
document.getElementById(Mrm).style.display="none";
}
if(num==1)
document.getElementById("cuxiaomenu").className="cuxiao_menu cuxiao_menu_bg1";
if(num==2)
document.getElementById("cuxiaomenu").className="cuxiao_menu cuxiao_menu_bg2";
}
</SCRIPT>
这个是JS,补充出来了
<SCRIPT language=javascript>
function cuxiao(num){for(var id = 1;id<=2;id++)
{var Mrm="cuxiao_con"+id;
if(id==num)
document.getElementById(Mrm).style.display="block";
else
document.getElementById(Mrm).style.display="none";
}
if(num==1)
document.getElementById("cuxiaomenu").className="cuxiao_menu cuxiao_menu_bg1";
if(num==2)
document.getElementById("cuxiaomenu").className="cuxiao_menu cuxiao_menu_bg2";
}
</SCRIPT>
这个是JS,补充出来了
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询