一個可以自動切換的Tab選項卡（滑動門）-滑動門選項卡

一個可以自動切換的選項卡，或者說是滑動門，本來這兩個東西就相關不大，有興趣的朋友研究一下，它除了自己播放每個選項卡內的內容外，也響應鼠標的動作，鼠標放上后即可響應變換內容，因主要想表現功能及代碼，因此沒有過多修飾，顯得異常簡潔。

Source Code to Run [www.liquidfrog.net 錯新網]

<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.liquidfrog.net" 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.liquidfrog.net" class="UBBWordLink">代碼</a></A></LI></UL><DIV id="tagContent"><DIV class="tagContent selectTag" id="tagContent0"><li>ASP源<a target="_blank" href="http://www.liquidfrog.net" 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.liquidfrog.net" 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-->
運行代碼復制代碼另存代碼收藏本頁提示:您可以修改后再運行