快捷導(dǎo)航

javascript 定時(shí)自動(dòng)切換的選項(xiàng)卡Tab

更新時(shí)間：2009年10月18日 00:27:02 作者：

JavaScript配合CSS制作一個(gè)能自動(dòng) 切換的網(wǎng)頁(yè)選項(xiàng)卡,每隔一段時(shí)間,它就自動(dòng)切換選項(xiàng)卡列表和標(biāo)題,時(shí)間自設(shè).

這里要注意,用于產(chǎn)生changeTabInterval的隨機(jī)數(shù)，防止頁(yè)面上TabPane過(guò)多，如果設(shè)置的changeTabInterval都一樣的話(huà)會(huì)產(chǎn)生整齊劃一的切換的效果，不美觀.

<title>自動(dòng)切換Tab選項(xiàng)卡</title>  <style> .tab { font-family: Verdana, Helvetica, Arial; font-size: 12px; position: relative; width: 100%; } .tab-border {border:1px solid;border-color: rgb(120,172,255);} .tab-head { background-color:rgb(234,242,255);; border:0px; height:23px; line-height:20px; position:relative; } .tab-head ul{ border:0px; height:23px; list-style:none; margin:0px; text-align:center; padding:0; position:absolute; } .tab-head li{ border: 1px solid; border-color: rgb(120,172,255); border-left: 0; border-bottom: 0; border-top: 0; cursor:pointer; color:#416AA3; float:left; display:block; height:22px;!important;height:20px; line-height:20px; padding: 2px 6px 0px 6px; margin-top: 2px; margin-right: -1px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } .tab-head li.hover{ border: 1px solid rgb(120,172,255); border-bottom: 0; padding: 0px 6px 3px 6px; margin: 0px 1px 0px 0px; background: white; font-size: 13px; font-weight: bold; color: rgb(0,66,174); overflow:visible; } </style> <div   class="wppm3vysvbp"   id="rptopmain_right_middle_right">                                  <div   class="wppm3vysvbp"   id="divForumBoard"></div>                                             <div   class="wppm3vysvbp"   id="divForumCast" style="padding:8px;height:200px"> <div   id="wppm3vysvbp"   class=rp_2equalcol><A href="#" target=_blank>黑客零起點(diǎn)教程 CHM</A></DIV> <div   id="wppm3vysvbp"   class=rp_2equalcol><A href="#" target=_blank>可以加密及解密的VB屏幕鍵盤(pán)組件</A></DIV> <div   id="wppm3vysvbp"   class=rp_2equalcol><A href="#" target=_blank>什么樣的項(xiàng)目經(jīng)歷會(huì)讓面試官眼前一亮</A></DIV> <div   id="wppm3vysvbp"   class=rp_2equalcol><A href="#" target=_blank>超級(jí)j2me飛行游戲瘋狂雷電源代碼</A></DIV> <div   id="wppm3vysvbp"   class=rp_2equalcol><A href="#" target=_blank>可以加密及解密的VB屏幕鍵盤(pán)組件</A></DIV> <div   id="wppm3vysvbp"   class=rp_2equalcol><A href="#" target=_blank>編程學(xué)習(xí)中的一些錯(cuò)誤認(rèn)識(shí)</A></DIV>                     </div>                                     <div   class="wppm3vysvbp"   id="divForumPanel" style="padding:8px;height:210px">                                 <div   id="wppm3vysvbp"   class=rp_2equalcol><A href="#" target=_blank>Delphi多文檔幾何圖形繪制及編輯程序</A></DIV> <div   id="wppm3vysvbp"   class=rp_2equalcol><A href="#" target=_blank>學(xué)ACM算法題有用嗎？</A></DIV> <div   id="wppm3vysvbp"   class=rp_2equalcol><A href="#" target=_blank>黑客零起點(diǎn)教程 CHM</A></DIV> <div   id="wppm3vysvbp"   class=rp_2equalcol><A href="#" target=_blank>超級(jí)j2me飛行游戲瘋狂雷電源代碼</A></DIV> <div   id="wppm3vysvbp"   class=rp_2equalcol><A href="#" target=_blank>B實(shí)現(xiàn)主窗體控制副窗口的顯示與隱藏</A></DIV> <div   id="wppm3vysvbp"   class=rp_2equalcol><A href="#" target=_blank>Delphi多文檔幾何圖形繪制及編輯程序</A></DIV>                             </div>                                                                         </div>         </div>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: