支持自动切换的tab标签代码札记
html代码如下:
<!-- tab标签代码begin --> <div class="tab1" id="tab1"> <div class="menu"> <ul> <li id="one1" onclick="setTab('one',1)">新闻</li> <li id="one2" onclick="setTab('one',2)">活动</li> <li id="one3" onclick="setTab('one',3)">公告</li> </ul> </div> <div class="menudiv"> <div id="con_one_1">新闻新闻新闻新闻新闻</div> <div id="con_one_2" style="display:none;">活动活动活动活动活动</div> <div id="con_one_3" style="display:none;">公告公告公告公告公告</div> </div> </div> <!-- tab标签代码end -->
jquery代码如下:
<script> function setTab(name,cursel){ cursel_0=cursel; for(var i=1; i<=links_len; i++){ var menu = document.getElementById(name+i); var menudiv = document.getElementById("con_"+name+"_"+i); if(i==cursel){ menu.className="off"; menudiv.style.display="block"; } else{ menu.className=""; menudiv.style.display="none"; } } } function Next(){ cursel_0++; if (cursel_0>links_len)cursel_0=1 setTab(name_0,cursel_0); } var name_0='one'; var cursel_0=1; var ScrollTime=3000;//循环周期,可任意更改(毫秒) var links_len,iIntervalId; onload=function(){ var links = document.getElementById("tab1").getElementsByTagName('li') links_len=links.length; for(var i=0; i<links_len; i++){ links[i].onmouseover=function(){ clearInterval(iIntervalId); this.onmouseout=function(){ iIntervalId = setInterval(Next,ScrollTime);; } } } document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){ clearInterval(iIntervalId); this.onmouseout=function(){ iIntervalId = setInterval(Next,ScrollTime);; } } setTab(name_0,cursel_0); iIntervalId = setInterval(Next,ScrollTime); } </script>