Question

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

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

Answer 1

刚好有收集到:
<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>