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

2024-09-05 12:20:35

字体：大中小

来源：转载

供稿：网友

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

<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>                <div id="big" onmouseover="zhuan()" onmouseout="jixu()" class="column480" style="padding-left:3px;">          <DIV id="con">            <UL id="tags">                <LI class="selectTag">ASP源代码 </LI>                <LI>PHp源码</LI>                <LI>Ajax源代码</LI>            </UL>          <DIV id="tagContent">              <DIV class="tagContent selectTag" id="tagContent0"><li>ASP源代码</li></DIV>              <DIV class="tagContent" id="tagContent1"><li>PHp源码</li></DIV>              <DIV class="tagContent" id="tagContent2"><li>Ajax源代码</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}		else		x=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>

上一篇：最简单但很实用的CSS菜单

下一篇：围成3D模型的JS图片旋转展示代码