运行代码框<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</p><p align='center'><b><a href='/Tech/WebDesign/JSTX/200703/2761.html'>上一页</a> <a href='/Tech/WebDesign/JSTX/200703/2761.html'>[1]</a> <font color='red'>[2]</font> <a href='/Tech/WebDesign/JSTX/200703/2761_3.html'>[3]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_4.html'>[4]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_5.html'>[5]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_6.html'>[6]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_7.html'>[7]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_8.html'>[8]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_9.html'>[9]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_10.html'>[10]</a> ... <a href='/Tech/WebDesign/JSTX/200703/2761_3.html'>下一页</a> <a href='/Tech/WebDesign/JSTX/200703/2761_11.html'> >> </a></b></p> <center></center></td> </tr> <tr> <td height="25" align='right' class="Article_tdbgall">教程录入：jerome 责任编辑：jerome </td> </tr> <tr> <td height="25"><li>上一篇教程： <a class='LinkPrevArticle' href='/Tech/WebDesign/JSTX/200703/2760.html' title='文章标题：[JS]用 或 || 来兼容FireFox 作 者：xling 更新时间：2007-3-30 12:42:34'>[JS]用 或 || 来兼容FireFox</a></li><br> <li>下一篇教程： <a class='LinkNextArticle' href='/Tech/WebDesign/JSTX/200703/2764.html' title='文章标题：用javascript实现Base64编码 作 者：tane274 更新时间：2007-3-30 12:42:36'>用javascript实现Base64编码</a></li></td> </tr> <tr> <td height="25" align='right' class="Article_tdbgall">【字体：<a href="javascript:fontZoomA();" class="top_UserLogin">小</a> <a href="javascript:fontZoomB();" class="top_UserLogin">大</a>】【<a href="/Tech/Comment.asp?ArticleID=2761" target="_blank">发表评论</a>】【<a href="/User/User_Favorite.asp?Action=Add&ChannelID=1002&InfoID=2761" target="_blank">加入收藏</a>】【<a href="/Tech/SendMail.asp?ArticleID=2761" target="_blank">告诉好友</a>】【<a href="/Tech/Print.asp?ArticleID=2761" target="_blank">打印此文</a>】【<a href="javascript:window.close();">关闭窗口</a>】 </td> </tr> </table> <br> <table style="WORD-BREAK: break-all" cellSpacing=0 cellPadding=0 width="575" border=0> <tr> <td class=main_shadow></td> </tr> <tr> <td class=main_title_575><B>相关教程</B></td> </tr> <tr> <td class=main_tdbg_575> <a class='LinkArticleCorrelative' href='/Tech/WebGuide/Experience/200707/3288.html' title='文章标题：图文教程：Discuz!5.5 JS的调用 作 者：佚名 更新时间：2007-7-24 15:02:52' target="_self">图文教程：Discuz!5.5 JS的调用</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDesign/JSTX/200707/3281.html' title='文章标题：用javascript 转换外部链接样式 作 者：幻想曲 更新时间：2007-7-19 17:17:27' target="_self">用javascript 转换外部链接样式</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDesign/JSTX/200707/3278.html' title='文章标题：用javascript实现select的美化 作 者：jxdawei 更新时间：2007-7-19 17:17:08' target="_self">用javascript实现select的美化</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDesign/JSTX/200707/3270.html' title='文章标题：javascript 的事件冒泡 demo 作 者：Realazy 更新时间：2007-7-19 17:15:39' target="_self">javascript 的事件冒泡 demo</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDesign/JSTX/200707/3269.html' title='文章标题：面向对象的 javascript 作 者：mozart0 更新时间：2007-7-19 17:15:35' target="_self">面向对象的 javascript</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDesign/JSTX/200707/3267.html' title='文章标题：仿6room网站图片链接效果 作 者：webflash 更新时间：2007-7-19 17:15:23' target="_self">仿6room网站图片链接效果</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDraw/FW/200704/3213.html' title='文章标题：打破玻璃的动画效果 作 者：jsuper 更新时间：2007-4-27 9:58:19' target="_self">打破玻璃的动画效果</a><br><a class='LinkArticleCorrelative' href='/Tech/MultiMedia/FLASH/200704/3210.html' title='文章标题：[Flash] 图片轮换效果 作 者：HBrO 更新时间：2007-4-27 9:58:06' target="_self">[Flash] 图片轮换效果</a><br><a class='LinkArticleCorrelative' href='/Tech/MultiMedia/FLASH/200704/3200.html' title='文章标题：flash8 绘制至尊土豆 作 者：lele 更新时间：2007-4-27 9:57:53' target="_self">flash8 绘制至尊土豆</a><br><a class='LinkArticleCorrelative' href='/Tech/MultiMedia/FLASH/200704/3197.html' title='文章标题：AS+JS的Flash网站无刷新定位技术 作 者：HBrO 更新时间：2007-4-27 9:57:47' target="_self">AS+JS的Flash网站无刷新定位技术</a><br></td> </tr> <tr> <td class=main_shadow></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width=575 border=0> <tr> <td height=25 class=main_title_575><b>网友评论：</b>（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）</td> </tr> <tr> <td class=main_tdbg_575 height=30> <script language='javascript' src='/Tech/Comment.asp?Action=JS&CommentNum=10&ArticleID=2761'></script></td> </tr> </table> </td> </tr> </table> <!-- ********网页中部代码结束******** --> <!-- ********网页底部代码开始******** --><iframe src="/popbbs.asp" width="0" height="0" border="0" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <table cellSpacing=0 cellPadding=0 width=776 align=center border=0> <tr> <td class=F11 align=middle background=/Skin/17zm_v6/bottom_r1_c1.jpg height=33><A class=bottom href="http://www.miibeian.gov.cn/" target=_blank>湘ICP备05010790号</A> <FONT color=#ffffff>{$Wap}</FONT></td> </tr> <tr> <td align=middle background=/Skin/17zm_v6/bottom_r2_c1.jpg height=25><A class=bottom href="/SiteInfo.asp?info=about" target=_blank>关于我们</A> | <A class=bottom href="/SiteInfo.asp?info=history" target=_blank>版本历史</A> | <A class=bottom href="/SiteInfo.asp?info=Contact" target=_blank>联系方法</A> | <A class=bottom href="/SiteInfo.asp?info=Privacy" target=_blank>隐私条例</A> | <A class=bottom href="/SiteInfo.asp?info=linkus" target=_blank>链接我们</A> | <A class=bottom href="/SiteInfo.asp?info=Advertise" target=_blank>广告服务</A> | <A class=bottom href="/SiteInfo.asp?info=FAQ" target=_blank>常见问题</A> | <A class=bottom href="/FriendSite" target=_blank>友情链接</A> | <A class=bottom href="/Announcelist.asp" target=_blank>网站公告</A> | <A class=bottom onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.17zm.net');" href="/$">设为首页</A> | <A class=bottom href="javascript:window.external.addFavorite('http://www.17zm.net','织梦建站服务网');">收藏本站</A></td> </tr> <tr> <td align=middle background=/Skin/17zm_v6/bottom_r3_c1.jpg height=26><SPAN class=f11>Copyright © 2001-2006 <STRONG>17zm.NET</STRONG> All Rights Reserved. <A class=bottom href="http://zmstudio.17zm.net/" target=_blank><IMG height=17 alt=织梦建站工作室 src="/Skin/17zm_v6/zmci_84-48.gif" width=29 align=absMiddle border=0></A>[<A class=bottom href="http://zmstudio.17zm.net/" target=_blank><STRONG>织梦建站工作室</STRONG></A>]™荣誉出品. Since <STRONG>2001</STRONG></SPAN></td> </tr> <tr> <td height=7><IMG id=bottom_r4_c1 height=7 alt="" src="/Skin/17zm_v6/bottom_r4_c1.jpg" width=776 border=0 name=bottom_r4_c1></td> </tr> </table> <iframe src="/stat.htm" width="0" height="0" border="0" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <!-- ********网页底部代码结束******** --> </body> </html> <NOSCRIPT><IFRAME src='*' Width='0' Height='0'></IFRAME></NOSCRIPT>
您现在的位置： 
