JS+CSS自动切换选项卡

随着Web开发人员开发了许多Ajax和CSS，Tab选项卡切换为基础的界面，成为一项非常有趣的技术，它让我们用一种简单的方式获得信息，而不需要打开和关闭多个窗口。尤其现在JQuery的流行,越来越多的插件很快的冒了出来。

今天分享一个自动切换的选项卡效果。

实例：

<style type="text/css"> body{ font-size:1em; line-height:170%; text-align:center; margin-top:100px} * { margin:0; padding:0} ul,li { list-style:none} div { width:500px;height:auto; margin:0px auto} li { float:left; padding:0 10px; height:30px; line-height:30px; font-weight:bold; cursor:pointer; color:#000; background:#FFC} .default { color:#000; background:#FFC} .current { color:#FFF; background:#369} .ctn { border:1px solid #369} .ctn p { display:none} </style> <script language="JavaScript" type="text/javascript"> var scrollCount=1; var pauseTime=3*1000; /*数字越小移动的时间越快*/ var timer; function changeClips() { for (i=1; i<6; i++){ var allCtn="ctn"+i; var allTtl="ttl"+i; document.getElementById(allCtn).style.display="none"; document.getElementById(allTtl).className="default"; } } function ttlOn(n) { var curCtn="ctn"+n; var curTtl="ttl"+n; changeClips(); document.getElementById(curCtn).style.display="block"; document.getElementById(curTtl).className="current"; scrollCount=n; } function affScroll() { stopScroll(); ttlOn(scrollCount); scrollCount+=1; if (scrollCount==6) { scrollCount=1; } timer=setTimeout("affScroll()",pauseTime); } function stopScroll() { clearTimeout(timer); } </script> <div class="ttl"><ul> <li id="ttl1" onclick="ttlOn(1); return false;" class="current">Title01</li> <li id="ttl2" onclick="ttlOn(2); return false;">Title02</li> <li id="ttl3" onclick="ttlOn(3); return false;">Title03</li> <li id="ttl4" onclick="ttlOn(4); return false;">Title04</li> <li id="ttl5" onclick="ttlOn(5); return false;">Title05</li> </ul></div> <div style="clear:both; font-size:0; line-height:0"></div> <div class="ctn"> <p id="ctn1" style="display:block">星期一<br />111</p> <p id="ctn2">星期二<br />222</p> <p id="ctn3">星期三<br />333</p> <p id="ctn4">星期四<br />444</p> <p id="ctn5">星期五<br />555</p> </div> <script language="JavaScript" type="text/javascript">affScroll();</script>

 

提示：可以先在文本框内，根据需要修改代码后再运行