一聚教程网：一个值得你收藏的教程网站

ps教程 | flash教程 | 路由器设置 | Jsp教程 | 加入收藏

PHP教程 Css教程 操作系统 数据库

首页 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
当前位置：一聚教程网 > 网页制作 > 设计基础

推荐专题

最新下载

热门教程

html几种tab切换详解

时间：2017-03-13 编辑：简简单单 来源：一聚教程网

1.鼠标移入移出切换

 

 代码如下 复制代码

 

 tab切换

 

 * {padding: 0;margin: 0;}

 li {list-style: none;}

 .wrapper {

 margin: 0 auto;

 width: 100%;

 max-width: 1140px;

 }

 .tabbox {

 margin: 40px auto;

 width: 400px;

 height: 200px;

 border: 1px solid #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;

 }

 ul li {

 float: left;

 border-left: 1px solid #f70;

 border-bottom: 1px solid #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;

 }

 .select a {

 color: #333;

 }

 a:hover, a:active {

 color: #f20;

 font-weight: bold;

 }

 .tab-txt {

 width: 400px;

 padding: 40px;

 overflow: hidden;

 }

 .demo {display: none;}

 .tab-txt p {

 line-height: 40px;

 }

 

 

 

 

 

     女枪

     

  • 提莫

    •  

  • 盖伦

    •  

  • 剑圣

    •  

 

 

 

 

 

我有两把枪，一把叫射，另一把叫，啊~

 

你有一双迷人的眼睛，我非常喜欢！

 

 

 

我去前面探探路

 

提莫队长正在待命！

 

 

 

放马过来吧，你会死的很光荣的！

 

快点儿结束吧，我头有点儿转晕了……

 

 

 

我的剑就是你的剑。

 

眼睛多，看东西才会更加清楚

 

 

 

 

 

 function $(id) {

 return typeof id === "string" ? document.getElementById(id) : id;

 }

 window.onload = function() {

 var tits = $("tabTit").getElementsByTagName("li");

 var txts = $("tabTxt").getElementsByClassName("demo");

 if(tits.length != txts.length) {return;}

 for(var i=0,l=tits.length; i<l; i++) {

 tits[i].id= i;

 tits[i].onmouseover=function() {

 for(varj=0; j

 tits[j].className="";

 txts[j].style.display="none";

 }

 this.className="select";

 txts[this.id].style.display="block";

 }

 }

 }

 

 

2.鼠标移入移出延时切换

 

 代码如下 复制代码

 

 tab切换之延时切换

 

 * {padding: 0;margin: 0;}

 li {list-style: none;}

 .wrapper {

 margin: 0 auto;

 width: 100%;

 max-width: 1140px;

 }

 .tabbox {

 margin: 40px auto;

 width: 400px;

 height: 200px;

 border: 1px solid #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;

 }

 ul li {

 float: left;

 border-left: 1px solid #f70;

 border-bottom: 1px solid #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;

 }

 .select a {

 color: #333;

 }

 a:hover, a:active {

 color: #f20;

 font-weight: bold;

 }

 .tab-txt {

 width: 400px;

 padding: 40px;

 overflow: hidden;

 }

 .demo {display: none;}

 .tab-txt p {

 line-height: 40px;

 }

 

 

 

 

 

     女枪

     

  • 提莫

    •  

  • 盖伦

    •  

  • 剑圣

    •  

 

 

 

 

 

我有两把枪，一把叫射，另一把叫，啊~

 

你有一双迷人的眼睛，我非常喜欢！

 

 

 

我去前面探探路

 

提莫队长正在待命！

 

 

 

放马过来吧，你会死的很光荣的！

 

快点儿结束吧，我头有点儿转晕了……

 

 

 

我的剑就是你的剑。

 

眼睛多，看东西才会更加清楚

 

 

 

 

 

 function $(id) {

 return typeof id === "string" ? document.getElementById(id) : id;

 }

 window.onload = function() {

 var timer = null;

 var tits = $("tabTit").getElementsByTagName("li");

 var txts = $("tabTxt").getElementsByClassName("demo");

 if(tits.length != txts.length) {return;}

 for(var i=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

  tits[j].className="";

  txts[j].style.display="none";

 }

 that.className="select";

 txts[that.id].style.display="block";

 },500);

 }

 }

 }

 

 

3. tab自动切换，鼠标移入移出立即切换

 

 代码如下 复制代码

 

 tab切换之自动切换

 

 * {padding: 0;margin: 0;}

 li {list-style: none;}

 .wrapper {

 margin: 0 auto;

 width: 100%;

 max-width: 1140px;

 }

 .tabbox {

 margin: 40px auto;

 width: 400px;

 height: 200px;

 border: 1px solid #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;

 }

 ul li {

 float: left;

 border-left: 1px solid #f70;

 border-bottom: 1px solid #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;

 }

 .select a {

 color: #333;

 }

 a:hover, a:active {

 color: #f20;

 font-weight: bold;

 }

 .tab-txt {

 width: 400px;

 padding: 40px;

 overflow: hidden;

 }

 .demo {display: none;}

 .tab-txt p {

 line-height: 40px;

 }

 

 

 

 

 

     女枪

     

  • 提莫

    •  

  • 盖伦

    •  

  • 剑圣

    •  

 

 

 

 

 

我有两把枪，一把叫射，另一把叫，啊~

 

你有一双迷人的眼睛，我非常喜欢！

 

 

 

我去前面探探路

 

提莫队长正在待命！

 

 

 

放马过来吧，你会死的很光荣的！

 

快点儿结束吧，我头有点儿转晕了……

 

 

 

我的剑就是你的剑。

 

眼睛多，看东西才会更加清楚

 

 

 

 

 

 function $(id) {

 return typeof id === "string" ? document.getElementById(id) : id;

 }

 window.onload = function() {

 var index = 0;

 var timer = null;

 var tits = $("tabTit").getElementsByTagName("li");

 var txts = $("tabTxt").getElementsByClassName("demo");

 if(tits.length != txts.length) {return;}

 for(var i=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);

 function autoPlay() {

 index++;

 if(index >= tits.length) {

 index = 0;

 }

 styleFun(index);

 }

 function styleFun(ele) {

 for(var j=0,m=tits.length; j

 tits[j].className="";

 txts[j].style.display="none";

 }

 tits[ele].className="select";

 txts[ele].style.display="block";

 //将鼠标移入移出时的index传给autoPlay;

 index=ele;

 }

 }

 

 

4. 广告栏切换实例

 

 代码如下 复制代码

 

 

 Document

 

 

 window.onload = function() {

 var wrap = 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);

 function picFunc() {

 index++;

 if(index >= piclist.length) {

 index = 0;

 }

 changePic(index);

 }

 // 定义图片切换函数

 function changePic(ele) {

 for(var j = 0, m = piclist.length; 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);

 }

 }

 }

 

 

 

 

 

 

    •  

    •  

    •  

    •  

    •  

     

     1

     

  • 2

    •  

  • 3

    •  

  • 4

    •  

  • 5

    •  

     

     

     

    相关文章

    热门栏目

    一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

    copyRight@2007-2024 www.111COM.NET AII Right Reserved 苏ICP备17065847号-2

    网站内容来自网络整理或网友投稿如有侵权行为请邮件:yijucomnet@163.com 我们24小时内处理