网(LieHuo.Net)教程 JavaScript配合CSS制作一个能自动切换的网页选项卡,每隔一段时间,它就自动切换选项卡列表和标题,时间自设,这里要注意,用于产生changeTabInterval的随机数,防止页面上TabPane过多,如果设置的changeTabInterval都一样的话会产生整齐划一的切换的效果,不美观.
<title>自动切换Tab选项卡 - LIEHUO.NET</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 id="rptopmain_right_middle_right"><div id="divForumBoard"></div><div id="divForumCast" style="padding:8px;height:200px"><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7651.html" _fcksavedurl="http://www.wfuyu.com/a/view/7651.html">网易有道推返利频道 细看与腾讯</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7612.html" _fcksavedurl="http://www.wfuyu.com/a/view/7612.html">刷广告就可以赚钱 小心加盟进传</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7450.html" _fcksavedurl="http://www.wfuyu.com/a/view/7450.html">戴坚定从必和必拓中国区公司离职</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7665.html" _fcksavedurl="http://www.wfuyu.com/a/view/7665.html">谷歌中国"我的帐户"登陆悄悄的</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7636.html" _fcksavedurl="http://www.wfuyu.com/a/view/7636.html">奥斯特诞辰 Google中国推Logo纪</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7717.html" _fcksavedurl="http://www.wfuyu.com/a/view/7717.html">Google Logo只显一半 故意还是BU</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7594.html" _fcksavedurl="http://www.wfuyu.com/a/view/7594.html">谷歌否认开放Caffeine是对付微软</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7624.html" _fcksavedurl="http://www.wfuyu.com/a/view/7624.html">贾君鹏,你妈妈喊你用某某IDC产品</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7628.html" _fcksavedurl="http://www.wfuyu.com/a/view/7628.html">中国搜索营销道路漫长 谷歌欢迎</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7461.html" _fcksavedurl="http://www.wfuyu.com/a/view/7461.html">雅虎总裁巴茨称:我们不是搜索公</A> </DIV></div><div id="divForumPanel" style="padding:8px;height:210px"><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7488.html" _fcksavedurl="http://www.wfuyu.com/a/view/7488.html">免费获取Adobe Flash Builder 4 </A></DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7561.html" _fcksavedurl="http://www.wfuyu.com/a/view/7561.html">中国区域地图Flash组件说明(附源</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7643.html" _fcksavedurl="http://www.wfuyu.com/a/view/7643.html">让UL在div中居中并横排显示的方</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7495.html" _fcksavedurl="http://www.wfuyu.com/a/view/7495.html">M8音乐网:寻求无序随机的音乐收</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7471.html" _fcksavedurl="http://www.wfuyu.com/a/view/7471.html">xara3D与firework配合打造3D特效</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7648.html" _fcksavedurl="http://www.wfuyu.com/a/view/7648.html">新农网(xinnong.com)中国第一农</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7642.html" _fcksavedurl="http://www.wfuyu.com/a/view/7642.html">CSS教程:Float菜单水平居中的实</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7644.html" _fcksavedurl="http://www.wfuyu.com/a/view/7644.html">网页实例代码:单行新闻纵向滚动</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7538.html" _fcksavedurl="http://www.wfuyu.com/a/view/7538.html">JavaScript优化篇:汉字转换为拼</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7641.html" _fcksavedurl="http://www.wfuyu.com/a/view/7641.html">汽车系列:马自达壁纸详细制作步</A> </DIV></div></div></div><br /><center>网更多教程,请访问:<a href=http://www.wfuyu.com/ target=_blank _fcksavedurl="http://www.wfuyu.com/ target=_blank">http://www.wfuyu.com/</a></center>提示:可修改后代码再运行!
上一篇 始终跟随鼠标移动的文字 纯JS脚本实现
下一篇 运营网站在实际操作中的“三条黄金定律”