运行代码框<script type="text/javascript" src="http://www.smallrain.net/jsimg/webtabs.js"></script> <script language=javascript> function f_start() { var Widget = new WebTabs_widget(480, 320, 10, 10, "absolute") Widget.add(new WebTabs_tab("文件", "page_1", "http://www.smallrain.net/jsimg/images/5.gif")) Widget.add(new WebTabs_tab("编辑", "page_2", "http://www.smallrain.net/jsimg/images/6.gif")) Widget.add(new WebTabs_tab("查看", "page_3", "http://www.smallrain.net/jsimg/images/7.gif")) Widget.add(new WebTabs_tab("插入", "page_4", "http://www.smallrain.net/jsimg/images/16.gif")) Widget.add(new WebTabs_tab("修改", "page_5", "http://www.smallrain.net/jsimg/images/17.gif")) document.getElementById("WebTabs_container").innerHTML = Widget Widget.f_init_tabs() //Widget.f_move_to(120, 20) Widget.f_move_by(20, 20) Widget.f_activate_tab(3) } </script> </head> <body> <div id=WebTabs_container></div> <div id=page_1 class=WebTabs-external-page-container> <div class=WebTabs-internal-page-container> <table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%"> <tr> <td width="100%" align="center"> <table><tr><td id="theTD"> <a href="###" onclick="document.getElementById('theTD').bgColor='yellow';">点我一下试试看?</a> </td></tr></table> </td> </tr> </table> </div> </div> <div id=page_2 class=WebTabs-external-page-container> <div class=WebTabs-internal-page-container> <table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%"> <tr> <td width="100%" align="center"> <style> u { border-bottom: 1px red dotted; text-decoration:none } </style> <u>Unalloyed stabilization is unceasingly changing Only use English software and data......</u> </td> </tr> </table> </div> </div> <div id=page_3 class=WebTabs-external-page-container> <div class=WebTabs-internal-page-container> <table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%"> <tr> <td width="100%" align="center"> <table border="1" onmouseover="document.getElementById('foo').src='http://www.blueidea.com/bbs/icon/icon11.gif'" onmouseout="document.getElementById('foo').src='http://www.blueidea.com/bbs/icon/icon10.gif'"><tr><td style="font-family:华文行楷;color:red">自己动手 丰衣足食</td></tr></table> <table border="1"><tr><td><img id="foo" src="http://www.blueidea.com/bbs/icon/icon10.gif"/></td></tr></table> </td> </tr> </table> </div> </div> <div id=page_4 class=WebTabs-external-page-container> <div class=WebTabs-internal-page-container> <table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%"> <tr> <td width="100%" align="center"> <a href="#" onclick="this.style.fontWeight='bold';"><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></a> </td> </tr> </table> </div> </div> <div id=page_5 class=WebTabs-external-page-container> <div class=WebTabs-internal-page-container> <table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%"> <tr> <td width="100%" align="center"> <style> .node{border:1px solid #000000; position: absolute; width: 19px; height: 90px; text-align:center; vertical-align:middle; font-size:9pt; background-color:#CCDDFF } TD {font-size:9pt} </style> <div class="node" style="left: 25px; top: 25px"><table width="100%" height="100%"><tr><td>朱雀</td></tr></table></div> <div class="node" style="left: 55px; top: 25px"><table width="100%" height="100%"><tr><td>玄武</td></tr></table></div> </td> </tr> </table> </div> </div> <script>f_start();</script> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
运行代码框<STYLE type=text/css>.sec1 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #eeeeee } .sec2 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BACKGROUND-COLOR: #d4d0c8 } .main_tab { BORDER-RIGHT: gray 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8 } </STYLE> <!--JavaScript部分--> <SCRIPT language=javascript> function secBoard(n) { for(i=0;i<secTable.cells.length;i++) secTable.cells[i].className="sec1"; secTable.cells[n].className="sec2"; for(i=0;i<mainTable.tBodies.length;i++) mainTable.tBodies[i].style.display="none"; mainTable.tBodies[n].style.display="block"; } </SCRIPT> <p align="center"> <!--HTML部分--> <TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0> <TBODY> <TR align=middle height=20> <TD class=sec2 onclick=secBoard(0) width="10%">1</TD> <TD class=sec1 onclick=secBoard(1) width="10%">2</TD> <TD class=sec1 onclick=secBoard(2) width="10%">3</TD> <TD class=sec1 onclick=secBoard(3) width="10%">4</TD> </TR></TBODY></TABLE> <TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0><!--关于TBODY标记--> <TBODY style="DISPLAY: block"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD><center><img src="tutu16.gif"><BR> <table><tr><td style="width:80;height:20;background-color:blue" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='blue'"></td></tr></table> <BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于cells集合--> <TBODY style="DISPLAY: none"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD><center><img src="tutu24.gif"><BR> <form name="form1" method="post" action=""> <select name="select" style="background:#FF0000;color:white"> <option >凤,风之羽也。</option> <option>ddddddddddddd</option> <option>ddddd
上一页 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] ... 下一页 >>