几种tab切换详解
1.鼠标移入移出切换
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>tab切换</title>
<styletype="text/css">
*{padding:0;margin:0;}
li{list-style:none;}
.wrapper{
margin:0auto;
width:100%;
max-width:1140px;
}
.tabbox{
margin:40pxauto;
width:400px;
height:200px;
border:1pxsolid#f70;
overflow:hidden;
}
.tabbox.tab-tit{
position:relative;
height:40px;
}
ul{
position:absolute;
left:-1px;
width:401px;
height:40px;
line-height:40px;
background-color:#eaeaea;
}
ulli{
float:left;
border-left:1pxsolid#f70;
border-bottom:1pxsolid#f70;
text-align:center;
width:99px;
height:40px;
overflow:hidden;
}
.clear{clear:both;}
.select{
padding-right:1px;
border-bottom:none;
background-color:#fff;
}
a:link,a:visited{
font-size:16px;
font-weight:bold;
color:#888;
text-decoration:none;
}
.selecta{
color:#333;
}
a:hover,a:active{
color:#f20;
font-weight:bold;
}
.tab-txt{
width:400px;
padding:40px;
overflow:hidden;
}
.demo{display:none;}
.tab-txtp{
line-height:40px;
}
</style>
</head>
<body>
<divclass="wrapper">
<divid="tabBox"class="tabbox">
<divid="tabTit"class="tab-tit">
<ul>
<liclass="select"><ahref="javascript:;">女枪</a></li>
<li><ahref="javascript:;">提莫</a></li>
<li><ahref="javascript:;">盖伦</a></li>
<li><ahref="javascript:;">剑圣</a></li>
</ul>
</div>
<!--<divclass="clear"></div>-->
<divid="tabTxt"class="tab-txt">
<divclass="demo"style="display:block;">
<p>我有两把枪，一把叫射，另一把叫，啊~</p>
<p>你有一双迷人的眼睛，我非常喜欢！</p>
</div>
<divclass="demo">
<p>我去前面探探路</p>
<p>提莫队长正在待命！</p>
</div>
<divclass="demo">
<p>放马过来吧，你会死的很光荣的！</p>
<p>快点儿结束吧，我头有点儿转晕了……</p>
</div>
<divclass="demo">
<p>我的剑就是你的剑。</p>
<p>眼睛多，看东西才会更加清楚</p>
</div>
</div>
</div>
</div>
<scripttype="text/javascript">
function$(id){
returntypeofid==="string"?document.getElementById(id):id;
}
window.onload=function(){
vartits=$("tabTit").getElementsByTagName("li");
vartxts=$("tabTxt").getElementsByClassName("demo");
if(tits.length!=txts.length){return;}
for(vari=0,l=tits.length;i<l;i++){
tits[i].id=i;
tits[i].onmouseover=function(){
for(varj=0;j<l;j++){
tits[j].className="";
txts[j].style.display="none";
}
this.className="select";
txts[this.id].style.display="block";
}
}
}
</script>
</body>
</html>
2.鼠标移入移出延时切换
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>tab切换之延时切换</title>
<styletype="text/css">
*{padding:0;margin:0;}
li{list-style:none;}
.wrapper{
margin:0auto;
width:100%;
max-width:1140px;
}
.tabbox{
margin:40pxauto;
width:400px;
height:200px;
border:1pxsolid#f70;
overflow:hidden;
}
.tabbox.tab-tit{
position:relative;
height:40px;
}
ul{
position:absolute;
left:-1px;
width:401px;
height:40px;
line-height:40px;
background-color:#eaeaea;
}
ulli{
float:left;
border-left:1pxsolid#f70;
border-bottom:1pxsolid#f70;
text-align:center;
width:99px;
height:40px;
overflow:hidden;
}
.clear{clear:both;}
.select{
padding-right:1px;
border-bottom:none;
background-color:#fff;
}
a:link,a:visited{
font-size:16px;
font-weight:bold;
color:#888;
text-decoration:none;
}
.selecta{
color:#333;
}
a:hover,a:active{
color:#f20;
font-weight:bold;
}
.tab-txt{
width:400px;
padding:40px;
overflow:hidden;
}
.demo{display:none;}
.tab-txtp{
line-height:40px;
}
</style>
</head>
<body>
<divclass="wrapper">
<divid="tabBox"class="tabbox">
<divid="tabTit"class="tab-tit">
<ul>
<liclass="select"><ahref="javascript:;">女枪</a></li>
<li><ahref="javascript:;">提莫</a></li>
<li><ahref="javascript:;">盖伦</a></li>
<li><ahref="javascript:;">剑圣</a></li>
</ul>
</div>
<!--<divclass="clear"></div>-->
<divid="tabTxt"class="tab-txt">
<divclass="demo"style="display:block;">
<p>我有两把枪，一把叫射，另一把叫，啊~</p>
<p>你有一双迷人的眼睛，我非常喜欢！</p>
</div>
<divclass="demo">
<p>我去前面探探路</p>
<p>提莫队长正在待命！</p>
</div>
<divclass="demo">
<p>放马过来吧，你会死的很光荣的！</p>
<p>快点儿结束吧，我头有点儿转晕了……</p>
</div>
<divclass="demo">
<p>我的剑就是你的剑。</p>
<p>眼睛多，看东西才会更加清楚</p>
</div>
</div>
</div>
</div>
<scripttype="text/javascript">
function$(id){
returntypeofid==="string"?document.getElementById(id):id;
}
window.onload=function(){
vartimer=null;
vartits=$("tabTit").getElementsByTagName("li");
vartxts=$("tabTxt").getElementsByClassName("demo");
if(tits.length!=txts.length){return;}
for(vari=0,l=tits.length;i<l;i++){
tits[i].id=i;
tits[i].onmouseover=function(){
varthat=this;
if(timer){
clearTimeout(timer);
timer=null;
}
timer=setTimeout(function(){
for(varj=0;j<l;j++){
tits[j].className="";
txts[j].style.display="none";
}
that.className="select";
txts[that.id].style.display="block";
},500);
}
}
}
</script>
</body>
</html>
3.tab自动切换，鼠标移入移出立即切换
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>tab切换之自动切换</title>
<styletype="text/css">
*{padding:0;margin:0;}
li{list-style:none;}
.wrapper{
margin:0auto;
width:100%;
max-width:1140px;
}
.tabbox{
margin:40pxauto;
width:400px;
height:200px;
border:1pxsolid#f70;
overflow:hidden;
}
.tabbox.tab-tit{
position:relative;
height:40px;
}
ul{
position:absolute;
left:-1px;
width:401px;
height:40px;
line-height:40px;
background-color:#eaeaea;
}
ulli{
float:left;
border-left:1pxsolid#f70;
border-bottom:1pxsolid#f70;
text-align:center;
width:99px;
height:40px;
overflow:hidden;
}
.clear{clear:both;}
.select{
padding-right:1px;
border-bottom:none;
background-color:#fff;
}
a:link,a:visited{
font-size:16px;
font-weight:bold;
color:#888;
text-decoration:none;
}
.selecta{
color:#333;
}
a:hover,a:active{
color:#f20;
font-weight:bold;
}
.tab-txt{
width:400px;
padding:40px;
overflow:hidden;
}
.demo{display:none;}
.tab-txtp{
line-height:40px;
}
</style>
</head>
<body>
<divclass="wrapper">
<divid="tabBox"class="tabbox">
<divid="tabTit"class="tab-tit">
<ul>
<liclass="select"><ahref="javascript:;">女枪</a></li>
<li><ahref="javascript:;">提莫</a></li>
<li><ahref="javascript:;">盖伦</a></li>
<li><ahref="javascript:;">剑圣</a></li>
</ul>
</div>
<!--<divclass="clear"></div>-->
<divid="tabTxt"class="tab-txt">
<divclass="demo"style="display:block;">
<p>我有两把枪，一把叫射，另一把叫，啊~</p>
<p>你有一双迷人的眼睛，我非常喜欢！</p>
</div>
<divclass="demo">
<p>我去前面探探路</p>
<p>提莫队长正在待命！</p>
</div>
<divclass="demo">
<p>放马过来吧，你会死的很光荣的！</p>
<p>快点儿结束吧，我头有点儿转晕了……</p>
</div>
<divclass="demo">
<p>我的剑就是你的剑。</p>
<p>眼睛多，看东西才会更加清楚</p>
</div>
</div>
</div>
</div>
<scripttype="text/javascript">
function$(id){
returntypeofid==="string"?document.getElementById(id):id;
}
window.onload=function(){
varindex=0;
vartimer=null;
vartits=$("tabTit").getElementsByTagName("li");
vartxts=$("tabTxt").getElementsByClassName("demo");
if(tits.length!=txts.length){return;}
for(vari=0,l=tits.length;i<l;i++){
tits[i].id=i;
tits[i].onmouseover=function(){
clearInterval(timer);
styleFun(this.id);
}
tits[i].onmouseout=function(){
timer=setInterval(autoPlay,2000);
}
}
//在开启定时器的同时清楚定时器并置空
if(timer){
clearInterval(timer);
timer=null;
}
timer=setInterval(autoPlay,2000);
functionautoPlay(){
index++;
if(index>=tits.length){
index=0;
}
styleFun(index);
}
functionstyleFun(ele){
for(varj=0,m=tits.length;j<m;j++){
tits[j].className="";
txts[j].style.display="none";
}
tits[ele].className="select";
txts[ele].style.display="block";
//将鼠标移入移出时的index传给autoPlay;
index=ele;
}
}
</script>
</body>
</html>
4.广告栏切换实例
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
.wrap{
height:170px;
width:490px;
margin:20pxauto;
overflow:hidden;
position:relative;
margin:100pxauto;
}
.wrapul{
position:absolute;
}
.wrapulli{
height:170px;
}
.wrapol{
position:absolute;
right:5px;
bottom:10px;
}
.wrapolli{
height:20px;
width:20px;
background:#ccc;
border:solid1px#666;
margin-left:5px;
color:#000;
float:left;
line-height:center;
text-align:center;
cursor:pointer;
}
.wrapol.on{
background:#E97305;
color:#fff;
}
</style>
<scripttype="text/javascript">
window.onload=function(){
varwrap=document.getElementById('wrap'),
pic=document.getElementById('pic'),
piclist=pic.getElementsByTagName('li'),
list=document.getElementById('list').getElementsByTagName('li'),
picheight=170,
index=0,
timer=null;
if(piclist.length!=list.length){
return;
}
//定义并调用自动播放函数
if(timer){
clearInterval(timer);
timer=null;
}
timer=setInterval(picFunc,2000);
functionpicFunc(){
index++;
if(index>=piclist.length){
index=0;
}
changePic(index);
}
//定义图片切换函数
functionchangePic(ele){
for(varj=0,m=piclist.length;j<m;j++){
list[j].className="";
}
pic.style.top=-ele*picheight+"px";
list[ele].className="on";
index=ele;
}
//鼠标划过整个容器时停止自动播放
wrap.onmouseover=function(){
clearInterval(timer);
}
//鼠标离开整个容器时继续播放至下一张
wrap.onmouseout=function(){
timer=setInterval(picFunc,2000);
}
//遍历所有数字导航实现划过切换至对应的图片
for(vari=0,l=list.length;i<l;i++){
list[i].id=i;
list[i].onmouseover=function(){
changePic(this.id);
}
}
}
</script>
</head>
<body>
<divclass="wrap"id='wrap'>
<ulid="pic">
<li><imgsrc="http://img.mukewang.com/54111cd9000174cd04900170.jpg"alt=""></li>
<li><imgsrc="http://img.mukewang.com/54111dac000118af04900170.jpg"alt=""></li>
<li><imgsrc="http://img.mukewang.com/54111d9c0001998204900170.jpg"alt=""></li>
<li><imgsrc="http://img.mukewang.com/54111d8a0001f41704900170.jpg"alt=""></li>
<li><imgsrc="http://img.mukewang.com/54111d7d00018ba604900170.jpg"alt=""></li>
</ul>
<olid="list">
<liclass="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！