如何用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>