动态交互效果：现实应用－各类付款方式

<style type="text/css">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

#loader {
    BORDER-RIGHT: #4296c5 1px solid; BORDER-TOP: #4296c5 1px solid; Z-INDEX: 10; RIGHT: 0px; BACKGROUND: #e3f8f9; FILTER: Alpha(Opacity=80); BORDER-LEFT: #4296c5 1px solid; WIDTH: 180px; BORDER-BOTTOM: #4296c5 1px solid; POSITION: absolute; TOP: 0px; ; TOP: e­xpression(offsetParent.scrollTop + 0 + "px"); HEIGHT: 23px; TEXT-ALIGN: left
}
OL LI {
    MARGIN: 8px
}
#con {
    FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 100%
}
#tabtags {

}
#tabtags LI {
    FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none; HEIGHT: 23px
}
#tabtags LI A {
    PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #fff; LINE-HEIGHT: 23px; PADDING-TOP: 0px; HEIGHT: 23px; TEXT-DECORATION: none
}
#tabtags LI.emptyTag {
    BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 4px
}
#tabtags LI.selectTag {
    
}
#tabtags LI.selectTag A {
    BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px
}

#tabtagContent {
    
}
.tabtagContent {
    DISPLAY: none;
}
#tabtagContent DIV.selectTag {
    DISPLAY: block
}
.RelatedBar {
    border:1px dashed #aecbd4; FONT-WEIGHT: bold; BACKGROUND-IMAGE: url('../../mods/images/tab_bar.gif'); MARGIN-RIGHT: 10px; BACKGROUND-REPEAT: repeat-x
}
.RelatedGif {
    MARGIN: 3px 3px -3px
}
.TopBar {
    border:1px dashed #aecbd4; FONT-WEIGHT: bold; BACKGROUND-IMAGE: url('../../mods/images/tab_bar.gif'); BACKGROUND-REPEAT: repeat-x; TEXT-ALIGN: center
}
.RecommendBar {
    border:1px dashed #aecbd4; FONT-WEIGHT: bold; BACKGROUND-IMAGE: url('../../mods/images/tab_bar.gif'); BACKGROUND-REPEAT: repeat-x
}
.RandomBar {
    border:1px dashed #aecbd4; FONT-WEIGHT: bold; BACKGROUND-IMAGE: url('../../mods/images/tab_bar.gif'); BACKGROUND-REPEAT: repeat-x
}
#AJAXLoginContainer {
    DISPLAY: none; Z-INDEX: 20; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 300px; ; TOP: e­xpression(offsetParent.scrollTop + 300 + "px"); TEXT-ALIGN: center
}
#AJAXLoginContainer #AJAXLogin {
    BORDER-RIGHT: #000000 2px solid; PADDING-RIGHT: 10px; BORDER-TOP: #000000 2px solid; PADDING-LEFT: 10px; BACKGROUND: #ffffff; PADDING-BOTTOM: 10px; MARGIN: auto; BORDER-LEFT: #000000 2px solid; WIDTH: 250px; PADDING-TOP: 10px; BORDER-BOTTOM: #000000 2px solid
}
#SmileMenu UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN-LEFT: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#SmileMenu LI {
    FLOAT: left; WIDTH: 20px
}
#SmileMenu A {
    BORDER-RIGHT: #dcdcdc 1px; BORDER-TOP: #dcdcdc 1px solid; DISPLAY: block; FONT: 9px Verdana; BORDER-LEFT: #dcdcdc 1px solid; COLOR: #ffffff; BORDER-BOTTOM: #dcdcdc 1px solid; TEXT-ALIGN: center
}
#SmileMenu A:link {
    BACKGROUND: #0099ff
}
#SmileMenu A:visited {
    BACKGROUND: #0099ff
}
#SmileMenu A:hover {
    BACKGROUND: #66ccff
}
#SmileMenu A:active {
    BACKGROUND: #66ccff
}
#SmileClose {
    BORDER-RIGHT: #dcdcdc 1px solid
}
#SmileClose A:link {
    BACKGROUND: #cc0000
}
#SmileClose A:visited {
    BACKGROUND: #cc0000
}
#SmileClose A:hover {
    BACKGROUND: #ff0000
}
#SmileClose A:active {
    BACKGROUND: #cc0000
}


-->
</style>



<SCRIPT type=text/javascript>

function selectTag(showContent,selfObj){
    // 操作标签
    var tabtag = document.getElementById("tabtags").getElementsByTagName("li");
    var tabtaglength = tabtag.length;
    for(i=0; i<tabtaglength; i++){
        tabtag[i].className = "";
    }
    selfObj.parentNode.className = "selectTag";
    // 操作内容
    for(i=0; j=document.getElementById("tabtagContent"+i); i++){
        j.style.display = "none";
    }
    document.getElementById(showContent).style.display = "block";
}
</SCRIPT>

</head>

<table width="896" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="1552" align="center" valign="top" background="img/bj4.jpg"><table width="846" height="57" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="845" height="13" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="10">　</td>
                <td width="100%" align="left" valign="top">　</td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td height="5"></td>
        </tr>
        <tr>
          <td height="20" align="center" valign="top"><table width="831" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="27" background="img/fk.jpg" align="center"> <div id=tabtags>
                    <table border="0" cellpadding="0" cellspacing="0"  width="100%" >
                      <tr>
                        <td width="20%" bgcolor="#4296C5"></td>
                        <td width="8%" bgcolor="#4296C5"> <li class=selectTag> <A onMouseMove="selectTag('tabtagContent0',this)" href="javascript:void(0)">银行汇款</A>
                          </li></td>
                        <td width="8%" bgcolor="#4296C5"><LI><A onMouseMove="selectTag('tabtagContent1',this)" href="javascript:void(0)">邮局汇款</A>
                          </LI></td>
                        <td width="8%" bgcolor="#4296C5"><LI><A onMouseMove="selectTag('tabtagContent2',this)" href="javascript:void(0)">支付宝汇款</A>
                          </LI></td>
                        <td width="15%" bgcolor="#4296C5"></td>
                      </tr>
                    </table>
                  </div></td>
              </tr>
              <tr>
                <td height="1"></td>
              </tr>
              <tr>
                <td height="3" align="left" valign="top"><img src="img/fk2.jpg" width="831" height="3" /></td>
              </tr>
              <tr>
                <td height="117" align="left" valign="top" background="img/fk2-z.jpg"><table width="824" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td height="111" align="center">
                        <!--银行汇款-->
                        <DIV id=tabtagContent>
                          <DIV class="tabtagContent selectTag" id=tabtagContent0>
                            <table width="824" border="0" cellpadding="0" cellspacing="0">
                              <tr>
                                <td width="211" height="111" align="center">　</td>
                                <td width="613"><table width="581" border="1" cellpadding="0" cellspacing="0" bordercolor="#F0F0F0">
                                    <tr>
                                      <td width="130" align="center" class="ys1">开户银行</td>
                                      <td width="294" align="center" class="ys1">银行帐号</td>
                                      <td width="149" height="26" align="center" class="ys1">收款人</td>
                                    </tr>
                                    <tr>
                                      <td align="center" class="ys3">农业银行</td>
                                      <td height="20" align="center" class="ys3">　</td>
                                      <td align="center" class="ys3">　</td>
                                    </tr>
                                    <tr>
                                      <td align="center" class="ys3">工商银行</td>
                                      <td height="20" align="center" class="ys3">　</td>
                                      <td align="center" class="ys3">　</td>
                                    </tr>
                                    <tr>
                                      <td align="center" class="ys3">建设银行</td>
                                      <td height="20" align="center" class="ys3">　</td>
                                      <td align="center" class="ys3">　</td>
                                    </tr>
                                  </table></td>
                              </tr>
                            </table>
                          </DIV>
                          <DIV class=tabtagContent id=tabtagContent1>
                            <table width="824" border="0" cellpadding="0" cellspacing="0">
                              <tr>
                                <td width="211" height="111" align="center">　</td>
                                <td width="613"> <table width="599" height="88" cellpadding="0" cellspacing="0">
                                    <tr>
                                      <td width="285" height="86" align="left" valign="top" class="ys2">
                                        <table width="279" border="0" cellspacing="0" cellpadding="0">
                                          <tr>
                                            <td width="18">　</td>
                                            <td width="261">　</td>
                                          </tr>
                                          <tr>
                                            <td>　</td>
                                            <td align="left" valign="top" class="ys2"><p>汇款地址：吉林省长春市亚泰大街4906号A座5F<br>
                                                　</p></td>
                                          </tr>
                                        </table></td>
                                      <td width="2" align="center" bgcolor="FFE7F3" class="ys2"></td>
                                      <td width="302" align="left" valign="top" class="ys2"><table width="279" border="0" cellspacing="0" cellpadding="0">
                                          <tr>
                                            <td width="21">　</td>
                                            <td width="258">　</td>
                                          </tr>
                                          <tr>
                                            <td>　</td>
                                            <td align="left" valign="top" class="ys2"><p>    请在汇款单详细的填写汇款人的姓名，地址，联系电话，并在附言栏上填写定购数量，便于我们及时发货。</p></td>
                                          </tr>
                                        </table></td>
                                    </tr>
                                  </table></td>
                              </tr>
                            </table>
                          </DIV>
                          <DIV class=tabtagContent id=tabtagContent2>
                            <table width="824" border="0" cellpadding="0" cellspacing="0">
                              <tr>
                                <td width="211" height="111" align="center">　</td>
                                <td width="613"> <table width="536" height="24" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                      <td width="15">　</td>
                                      <td width="521" align="left"><span class="ys1">
                                      支付宝账号： </span></td>
                                    </tr>
                                  </table></td>
                              </tr>
                            </table>
                          </DIV>
                        </DIV></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td height="2" align="left" valign="top"><img src="img/fk2-x.jpg" width="831" height="2" /></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td height="2"></td>
        </tr>
        <tr>
          <td height="4"></td>
        </tr>
        <tr>
          <td height="13" align="center" valign="top"><table width="827" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="12" bgcolor="#CCCCCC"></td>
              </tr>
              <tr>
                <td height="2"></td>
              </tr>
              <tr>
                <td width="2" bgcolor="#CCCCCC"></td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>

</body>
</html>