php tab页切换功能,几种tab切换详解

本文主要分享了几种tab切换的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧

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

tits[i].id = i;

tits[i].onmouseover = function() {

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

tits[i].id = i;

tits[i].onmouseover = function() {

var that = this;

if(timer) {

clearTimeout(timer);

timer = null;

}

timer = setTimeout(function() {

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

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

* {

margin: 0;

padding: 0;

list-style: none;

}

.wrap {

height: 170px;

width: 490px;

margin: 20px auto;

overflow: hidden;

position: relative;

margin: 100px auto;

}

.wrap ul {

position: absolute;

}

.wrap ul li {

height: 170px;

}

.wrap ol {

position: absolute;

right: 5px;

bottom: 10px;

}

.wrap ol li {

height: 20px;

width: 20px;

background: #ccc;

border: solid 1px #666;

margin-left: 5px;

color: #000;

float: left;

line-height: center;

text-align: center;

cursor: pointer;

}

.wrap ol .on {

background: #E97305;

color: #fff;

}

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 < 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(var i = 0, l = list.length; i < l; i++) {

list[i].id = i;

list[i].onmouseover = function() {

changePic(this.id);

}

}

}

• 
• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4
5. 5

更多几种tab切换详解相关文章请关注PHP中文网！

相关标签：tab切换

本文原创发布php中文网，转载请注明出处，感谢您的尊重！