标签式的菜单

<style type="text/css">
body {
 font-family: "宋体";
 font-size: 12px;
 font-weight: normal;
 text-decoration: none;
}
.tab {
 MARGIN-TOP: 10px
}
#TabTab03Con1 {
 BORDER-BOTTOM: #757575 1px solid; BORDER-LEFT:#757575 1px solid; LINE-HEIGHT: 100px; WIDTH: 692px; HEIGHT: 465px;BORDER-RIGHT: #757575 1px solid
}
#TabTab03Con2 {
 BORDER-BOTTOM: #757575 1px solid; BORDER-LEFT:#757575 1px solid; LINE-HEIGHT: 100px; WIDTH: 692px; HEIGHT: 465px;BORDER-RIGHT: #757575 1px solid
}
#TabTab03Con3 {
 BORDER-BOTTOM: #757575 1px solid; BORDER-LEFT:#757575 1px solid; LINE-HEIGHT: 100px; WIDTH: 692px; HEIGHT: 465px;BORDER-RIGHT: #757575 1px solid
}
#TabTab03Con4 {
 BORDER-BOTTOM: #757575 1px solid; BORDER-LEFT:#757575 1px solid; LINE-HEIGHT: 100px; WIDTH: 692px; HEIGHT: 465px;BORDER-RIGHT: #757575 1px solid
}
.xixi1 {
 BACKGROUND-IMAGE: url(images/01.jpg);LINE-HEIGHT: 27px; WIDTH: 692px; HEIGHT: 27px; CURSOR:pointer
}
.xixi2 {
 BACKGROUND-IMAGE: url(images/02.jpg);LINE-HEIGHT: 27px; WIDTH: 692px; HEIGHT: 27px; CURSOR:pointer
}
.xixi3 {
 BACKGROUND-IMAGE: url(images/03.jpg);LINE-HEIGHT: 27px; WIDTH: 692px; HEIGHT: 27px; CURSOR:pointer
}
.xixi4 {
 BACKGROUND-IMAGE: url(images/03.jpg);LINE-HEIGHT: 27px; WIDTH: 692px; HEIGHT: 27px; CURSOR:pointer
}
.tab1 {
 TEXT-ALIGN: center; LINE-HEIGHT: 27px; WIDTH:115px; FLOAT: left; HEIGHT: 27px; CURSOR: pointer
}
.tab2 {
 TEXT-ALIGN: center; LINE-HEIGHT: 27px; WIDTH:115px; FLOAT: left; HEIGHT: 27px; COLOR: #ffffff; CURSOR:pointer
}
.tab3 {
 TEXT-ALIGN: center; LINE-HEIGHT: 27px; WIDTH:115px; FLOAT: left; HEIGHT: 27px; COLOR: #ffffff; CURSOR:pointer
}
.tab4 {
 TEXT-ALIGN: center; LINE-HEIGHT: 27px; WIDTH:115px; FLOAT: left; HEIGHT: 27px; COLOR: #ffffff; CURSOR:pointer
}
</style>

<SCRIPTtype=text/javascript>
 function setTab03Syn ( i )
 {
  selectTab03Syn(i);
 }
 
 function selectTab03Syn ( i )
 {
  switch(i){
   case 1:
   document.getElementByIdx_x("TabTab03Con1").style.display="block";
   document.getElementByIdx_x("TabTab03Con2").style.display="none";
   document.getElementByIdx_x("TabTab03Con3").style.display="none";
   document.getElementByIdx_x("TabTab03Con4").style.display="none";
   document.getElementByIdx_x("font1").style.color="#000000";
   document.getElementByIdx_x("font2").style.color="#ffffff";
   document.getElementByIdx_x("font3").style.color="#ffffff";
   document.getElementByIdx_x("font4").style.color="#ffffff";
   break;
   case 2:
   document.getElementByIdx_x("TabTab03Con1").style.display="none";
   document.getElementByIdx_x("TabTab03Con2").style.display="block";
   document.getElementByIdx_x("TabTab03Con3").style.display="none";
   document.getElementByIdx_x("TabTab03Con4").style.display="none";
   document.getElementByIdx_x("font1").style.color="#ffffff";
   document.getElementByIdx_x("font2").style.color="#000000";
   document.getElementByIdx_x("font3").style.color="#ffffff";
   document.getElementByIdx_x("font4").style.color="#ffffff";
   break;
   case 3:
   document.getElementByIdx_x("TabTab03Con1").style.display="none";
   document.getElementByIdx_x("TabTab03Con2").style.display="none";
   document.getElementByIdx_x("TabTab03Con3").style.display="block";
   document.getElementByIdx_x("TabTab03Con4").style.display="none";
   document.getElementByIdx_x("font1").style.color="#ffffff";
   document.getElementByIdx_x("font2").style.color="#ffffff";
   document.getElementByIdx_x("font3").style.color="#000000";
   document.getElementByIdx_x("font4").style.color="#ffffff";
   break;
   case 4:
   document.getElementByIdx_x("TabTab03Con1").style.display="none";
   document.getElementByIdx_x("TabTab03Con2").style.display="none";
   document.getElementByIdx_x("TabTab03Con3").style.display="none";
   document.getElementByIdx_x("TabTab03Con4").style.display="block";
   document.getElementByIdx_x("font1").style.color="#ffffff";
   document.getElementByIdx_x("font2").style.color="#ffffff";
   document.getElementByIdx_x("font3").style.color="#ffffff";
   document.getElementByIdx_x("font4").style.color="#000000";
   break;
  }
 }

</SCRIPT>

<TABLE border=0 cellSpacing=0 cellPadding=0width=692>
       <TBODY>
         <TR>
           <TD>
             <DIV class=tab>
               <DIV id=bg class=xixi1>
                     <DIV id=font1 class=tab1onmouseover="setTab03Syn(1);document.getElementByIdx_x('bg').className='xixi1'">学习内容与考试</DIV>
                     <DIV id=font2 class=tab2onmouseover="setTab03Syn(2);document.getElementByIdx_x('bg').className='xixi2'">如何通过考试</DIV>
                     <DIV id=font3 class=tab3onmouseover="setTab03Syn(3);document.getElementByIdx_x('bg').className='xixi3'">尚德机构名师</DIV>
                     <DIV id=font4 class=tab4onmouseover="setTab03Syn(4);document.getElementByIdx_x('bg').className='xixi4'">0000名师</DIV>
                </DIV>
                     <DIVid=TabTab03Con1>00000</DIV>
                     <DIV style="DISPLAY: none"id=TabTab03Con2>111111</DIV>
                     <DIV style="DISPLAY: none"id=TabTab03Con3>222222222</DIV>
                     <DIV style="DISPLAY: none"id=TabTab03Con4>333333</DIV>
             </DIV>
</TD></TR></TBODY></TABLE>