一个可以自动切换的Tab选项卡（滑动门）-滑动门选项卡

一个可以自动切换的选项卡，或者说是滑动门，本来这两个东西就相关不大，有兴趣的朋友研究一下，它除了自己播放每个选项卡内的内容外，也响应鼠标的动作，鼠标放上后即可响应变换内容，因主要想表现功能及代码，因此没有过多修饰，显得异常简洁。

Source Code to Run [www.cuoxin.com 错新网]

<title>自动切换的Tab选项卡</title><style>OL LI {MARGIN: 8px}#con {FONT-SIZE: 12px; MARGIN-RIGHT: 2px; WIDTH: 480px}#tags {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 0px; WIDTH: 450px; PADDING-TOP: 0px; HEIGHT: 23px}#tags LI {FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none; HEIGHT: 23px}#tags LI A {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #999; LINE-HEIGHT: 23px; PADDING-TOP: 0px; HEIGHT: 23px; TEXT-DECORATION: none}#tags LI.emptyTag {BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 4px}#tags LI.selectTag {BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 25px}#tags LI.selectTag A {BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px}#tagContent {BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #ddd 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #ddd 1px solid;}.tagContent {PADDING-RIGHT: 2px; DISPLAY: none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 480px; PADDING-TOP: 5px; HEIGHT: 210px}#tagContent DIV.selectTag {DISPLAY: block}#tagContent li {float: left;padding-left:1px;padding-bottom:7px;}#tagContent li span{float: right;color:#ccc;font-size:10px;}/*tagContent Style*/</style><!--tabselect--><div id="big" onmouseover="zhuan()" onmouseout="jixu()" class="column480" style="padding-left:3px;"><DIV id="con"><UL id="tags"><LI class="selectTag"><A onmouseover="selectTag('tagContent0',this)" href="javascript:void(0)">ASP源<a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">代码</a></A> </LI><LI><A onmouseover="selectTag('tagContent1',this)" href="javascript:void(0)">PHp源码</A></LI><LI><A onmouseover="selectTag('tagContent2',this)" href="javascript:void(0)">Ajax源<a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">代码</a></A></LI></UL><DIV id="tagContent"><DIV class="tagContent selectTag" id="tagContent0"><li>ASP源<a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">代码</a></li></DIV><DIV class="tagContent" id="tagContent1"><li>PHp源码</li></DIV><DIV class="tagContent" id="tagContent2"><li>Ajax源<a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">代码</a></li></DIV></DIV></DIV><SCRIPT type="text/javascript">var obig=document.getElementById("big");function selectTag(showContent,selfObj){var tag = document.getElementById("tags").getElementsByTagName("li");var taglength = tag.length;for(i=0; i<taglength; i++){tag[i].className = "";}selfObj.parentNode.className = "selectTag";for(i=0; j=document.getElementById("tagContent"+i); i++){j.style.display = "none";}document.getElementById(showContent).style.display = "block";}var x=0;function scrollTag(){var tags=document.getElementById("tags").getElementsByTagName("a");if(x<2){x=x+1}elsex=0;var tag = document.getElementById("tags").getElementsByTagName("li");var taglength = tag.length;for(i=0; i<taglength; i++){tag[i].className = "";}tags[x].parentNode.className = "selectTag";for(i=0; j=document.getElementById("tagContent"+i);i++){j.style.display="none";}document.getElementById("tagContent"+x).style.display="block";}var scrolll=setInterval(scrollTag,2000);function zhuan(){clearInterval(scrolll);}function jixu(){scrolll=setInterval(scrollTag,2000);}</SCRIPT></div><!--/tabselect-->
运行代码复制代码另存代码收藏本页提示:您可以修改后再运行