如何用DIV+CSS来构建内嵌页面跟随按钮变化

如何用DIV+CSS来构建内嵌页面跟随按钮变化

效果说明图:





CSS代码:

.PartL {

BACKGROUND: url() #ffd77b repeat-y; OVERFLOW: hidden;

}

.TabADS {

OVERFLOW: hidden; WIDTH: 800px;

}

.TabADS UL {

CLEAR: both; OVERFLOW: hidden; WIDTH: 800px; HEIGHT: 24px;

}

.TabADS LI {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(images/center1.jpg) #e4e4e4 no-repeat right 50%; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 60px; CURSOR: pointer; COLOR: #333; PADDING-TOP: 6px; HEIGHT: 18px; TEXT-ALIGN: center

}

.TabADS .TasADSOn {

FONT-WEIGHT: bold; BACKGROUND: url(images/center.jpg) #ffe4a6 no-repeat right 50%; CURSOR: pointer; COLOR: #333; TEXT-ALIGN: center

}

.TabADSCon {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px

}

.TabADSCon LI {

LINE-HEIGHT: 20px; TEXT-ALIGN: left;OVERFLOW: hidden;

}

HTML代码:

<TABLE width=800 align="center" cellSpacing=0>

<TBODY>

<TR>

<TD>

<SCRIPT language=javascript type=text/javascript>

function Show_TabADSMenu(tabadid_num,tabadnum){

for(var i=0;i<5;i++){document.getElementById("tabadcontent_"+tabadid_num+i).style.display="none";}

for(var i=0;i<5;i++){document.getElementById("tabadmenu_"+tabadid_num+i).className="";}

document.getElementById("tabadmenu_"+tabadid_num+tabadnum).className="TasADSOn";

document.getElementById("tabadcontent_"+tabadid_num+tabadnum).style.display="block";

}

</SCRIPT>

<DIV class=TabADS>

<UL>

<LI class=TasADSOn id=tabadmenu_10

onmouseover="setTimeout('Show_TabADSMenu(1,0)',200);">功能一 </LI>

<LI id=tabadmenu_11

onmouseover="setTimeout('Show_TabADSMenu(1,1)',200);">功能二 </LI>

<LI id=tabadmenu_12

onmouseover="setTimeout('Show_TabADSMenu(1,2)',200);">功能三</LI>

<LI id=tabadmenu_13

onmouseover="setTimeout('Show_TabADSMenu(1,3)',200);">功能四 </LI>

<LI id=tabadmenu_14

onmouseover="setTimeout('Show_TabADSMenu(1,4)',200);">功能五 </LI>

</UL>

</DIV>

<DIV class=TabADSCon>

<UL id=tabadcontent_10>

<LI>

<iframe src="1.html" width="800" height="400" style="frameborder:0" frameborder=auto scrolling=auto></iframe>

</LI>

</UL>

<UL id=tabadcontent_11 style="DISPLAY: none">

<LI>

<iframe src="5.html" width="800" height="400" style="frameborder:0" frameborder=auto scrolling=auto></iframe>

</LI>

</UL>

<UL id=tabadcontent_12 style="DISPLAY: none">

<LI>

<iframe src="2.html" width="800" height="400" style="frameborder:0" frameborder=auto scrolling=auto></iframe>

</LI>

</UL>

<UL id=tabadcontent_13 style="DISPLAY: none">

<LI>

<iframe src="3.html" width="800" height="400" style="frameborder:0" frameborder=auto scrolling=auto></iframe>

</LI>

</UL>

<UL id=tabadcontent_14 style="DISPLAY: none">

<LI>

<iframe src="1.html" width="800" height="400" style="frameborder:0" frameborder=auto scrolling=auto></iframe>

</LI>

</UL>

</div>

</div>

</TD>

</TR>

</TBODY>

</TABLE>