谁有DIV+CSS制作的TAB选项卡给拷一个呗

DIV+CSS制作的，不要用其它的技术。简单点的。谢了。... DIV+CSS制作的，不要用其它的技术。简单点的。谢了。展开

 我来答

3个回答

#热议# 什么是淋病？哪些行为会感染淋病？

larithine1
2011-07-12 · TA获得超过308个赞

知道小有建树答主

回答量：783

采纳率：0%

帮助的人：553万

我也去答题访问个人页

关注

展开全部

已赞过 已踩过<

评论收起

百度网友54fa85666
2011-07-13 · TA获得超过200个赞

知道小有建树答主

回答量：417

采纳率：100%

帮助的人：237万

我也去答题访问个人页

关注

展开全部

刚好有收集到:

<style>
*{ margin:0; padding:0;}
ul{ list-style:none}
body{ font-size:12px}
#tabMenus{ width:400px; margin:100px auto 0 auto;overflow:hidden; border:#ccc solid 1px; border-bottom:none;}
#tabMenus li{ float:left; width:100px; height:25px; line-height:25px; background:#ccc; text-align:center}
#tabMenus li a{ display:block; height:100%; color:#000000; text-decoration:none}
#tabMenus li.current{background:#fff}
#tabMenus li.usual{background:#ccc;}
#tabCons{ clear:both;width:400px; margin:0 auto; overflow:hidden; border:#ccc solid 1px; border-top:none}
#tabCons .con{ float:left; padding:10px; width:380px; display:none}
</style>
<script>
function tab(menus,cons,openClass,closeClass,speed){
	   var count = menus.length; //选项的个数。
	   var now=1;                //记录当前滑过的选项。
	   var timer=null;           //
	   
	   var clearOpenClass = function(){//清除滑过样式。
	   for(var i = 0 ; i < count; i++)
                  {
		   menus[i].className = closeClass;                                          
                    cons[i].style.display = "none";
                  }
	   };
	   
	   var changeTab = function(v){//添加滑过样式以及内容切换。
                  clearOpenClass();
		 menus[v].className = openClass;
		 cons[v].style.display = "block";
		 now= v+1;
	   };

var autoChange = function (){//自动切换
	     if(now<count){
		changeTab(now);		
		}else{
		 now = 0;
		changeTab(now);
	     }
	    }; 
		
	var setAuto = function (){timer = setInterval(autoChange, speed)};
        var clearAuto = function (){clearInterval(timer)};    
				
	    this.init = function(){//初始化。
	              if(menus.length != cons.length){ return;}
	              clearOpenClass();
		      for(var i = 0 ; i < count; i++){ 
			         menus[i].value = i;                              
                  }
				menus[0].className='current';
			       cons[0].style.display = "block";
	   };
	   
	   this.autoAction = function(){//自动切换时的动作。
	           setAuto();
	   	  for(var i = 0 ; i < count; i++){                             
                     menus[i].onmouseover = function(){clearAuto();changeTab(this.value);};
	                 menus[i].onmouseout = function(){setAuto();};
			}		 
       };
	   
	   this.usualAction = function(){//普通切换时的动作。
	   	  for(var i = 0 ; i < count; i++){                             
                     menus[i].onmouseover = function(){changeTab(this.value);};
			}		 
       };
		
};
tab.prototype = { 
       usual : function(){
	   this.init();
	   this.usualAction();  	                           
       },
	   auto : function(){
	   this.init();
	   this.autoAction(); 	                           
	   }
          
}
function $(id){return document.getElementById(id);}
window.onload=function(){
var menus=$('tabMenus').getElementsByTagName('li');
var cons=$('tabCons').getElementsByTagName('div');
var t=new tab(menus,cons,'current','usual',2000);
t.auto();
}
</script>

<ul id="tabMenus">
<li><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">3333</a></li>
<li><a href="#">4444</a></li>
</ul>
<div id="tabCons">
<div class="con">1111</div>
<div class="con">2222</div>
<div class="con">3333</div>
<div class="con">4444</div>
</div>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

zrkrplmgz
2011-07-12 · TA获得超过367个赞

知道答主

回答量：520

采纳率：0%

帮助的人：388万

我也去答题访问个人页

关注

展开全部

是这样，联系我啊

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

谁有DIV+CSS制作的TAB选项卡给拷一个呗

其他类似问题

为你推荐：