您的位置：首页 > Web前端 > JavaScript

JS实现TAB自动切换

2009-08-13 15:29 411 查看
JS实现TAB自动切换
2009-05-17 20:39
一、横向切换：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>横的</title>

<style type="text/css">

* { margin:0; padding:0; font:12px Arial; }

#div { width:320px; height:140px; border:1px solid #ccc; margin:100px auto; background:#eee; }

#div ul { list-style:none; }

#div li { display:block; width:80px; float:left; height:25px; line-height:25px; text-align:center; }

.current { background:#eee; }

.tab { width:80px; background-color:#ccc; border-bottom:1px solid #666; }

#show { text-align:center; }

</style>

<script language="javascript" type="text/javascript">

<!--

var n=1;

var time=500;//延迟时间

var strArr=new Array();

strArr[0]="11";

strArr[1]="22";

strArr[2]="33";

strArr[3]="44";

function init(){document.getElementById("show").innerHTML = strArr[0];}

function show(){

n=n>4?1:n;

for(i=1;i<(strArr.length+1);i++){

if(i==n) document.getElementById("tab_"+i).className = "current";

else document.getElementById("tab_"+i).className = "tab";

}

document.getElementById("show").innerHTML = strArr[n-1];

n++;

}

setInterval("show()",time);

window.onload = function(){

init();

}

//-->

</script>

</head>

<body>

<div id="div">

<ul>

<li id="tab_1" class="current">Tab_1</li>

<li id="tab_2" class="tab">Tab_2</li>

<li id="tab_3" class="tab">Tab_3</li>

<li id="tab_4" class="tab">Tab_4</li>

</ul>

<div id="show"></div>

</div>

</body>

</html>

二、纵向切换：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>纵的</title>

<style>

.tab{width:100px;height:25px;background-color:#ccc;margin:0;padding:0;

border-right:1px solid #666;}

.tab_on{width:100px;height:25px;background-color:#eee;margin:0;padding:0;

border-bottom:1px solid #666;

border-top:1px solid #666;

border-left:1px solid #666;}

#show{

width:200px;

height:100px;

background-color:#eee;

border-bottom:1px solid #666;

border-top:1px solid #666;

border-right:1px solid #666;

line-height:30px;

}

</style>

<script language="javascript" type="text/javascript">

<!--

var n=1;//初始化n

var time=1000;//延迟时间

var strArr=new Array();//定义数组存放数据

strArr[0]="选项111111111111111111";//数据

strArr[1]="选项222222222222222222";

strArr[2]="选项333333333333333333";

strArr[3]="选项444444444444444444";

function init(){document.getElementById("show").innerHTML = strArr[0];}//程序初始化

function show(){

n=n>strArr.length?1:n;//如果n>数组长度 则重新赋值为1，以便程序循环

for(i=1;i<(strArr.length+1);i++){//这里for用来改变当前tab的classname

if(i==n) document.getElementById("tab_"+i).className = "tab_on";

else document.getElementById("tab_"+i).className = "tab";

}

document.getElementById("show").innerHTML = strArr[n-1];//现实数据

n++;

}

setInterval("show()",time);//隔一秒执行一次，永远执行下去

//-->

</script>

</head>

<body onload="init()">

<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#eeeeee">

<tr>

<td align="right">

<div id="tab_1" class="tab_on"></div>

<div id="tab_2" class="tab" ></div>

<div id="tab_3" class="tab" ></div>

<div id="tab_4" class="tab"></div>

</td>

<td bgcolor="#eeeeee">

<div id="show"></div>

</td>

</tr>

</table>

</body>

</html>

三、同时具有自动与手动功能的：

<div>

<div class="menu">

<ul>

<li><a class="tab1" href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');"

onclick="return false;" title="" id="tablink1">Tab 1</a></li>

<li><a class="tab2 tabactive" href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');"

onclick="return false;" title="" id="tablink2">Tab 2 </a></li>

<li><a class="tab3" href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');"

onclick="return false;" title="" id="tablink3">Tab 3 </a></li>

<li><a class="tab4" href="#" onmouseover="easytabs('1', '4');" onfocus="easytabs('1', '4');"

onclick="return false;" title="" id="tablink4">Tab 4 </a></li>

</ul>

</div>

<div style="display: none;" id="tabcontent1">

Tabcontent 1

</div>

<div style="display: block;" id="tabcontent2">

Tabcontent 2

</div>

<div style="display: none;" id="tabcontent3">

Tabcontent 3

</div>

<div style="display: none;" id="tabcontent4">

Tabcontent 4

</div>

</div>

<style>

{

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

}

.menu

{

background-color: #ececec;

color: #272727;

border-bottom: 1px solid #d7d7d7;

height: 23px;

width: 300px;

}

.menu ul

{

margin: 0px;

padding: 0px;

list-style: none;

text-align: center;

}

.menu li

{

display: inline;

line-height: 23px;

}

.menu li a

{

color: #000000;

text-decoration: none;

padding: 4px 5px 6px 5px;

border-left: 1px solid #ececec;

border-right: 1px solid #ececec;

}

.menu li a.tabactive

{

border-left: 1px solid #d7d7d7;

border-right: 1px solid #d7d7d7;

background-color: #CCCCCC;

font-weight: bold;

position: relative;

}

#tabcontent1, #tabcontent2, #tabcontent3, #tabcontent4

{

border: 1px solid #ececec;

width: 300px;

text-align: center;

padding: 6px 0px;

font-size: 12px;

margin-bottom: 5px;

}

</style>

<script>

//Set the id names of your tablink (without a number at the end)

var tablink_idname = new Array("tablink")

//Set the id name of your tabcontentarea (without a number at the end)

var tabcontent_idname = new Array("tabcontent")

//Set the number of your tabs

var tabcount = new Array("4")

//Set the Tab wich should load at start (In this Example:Tab 2 visible on load)

var loadtabs = new Array("2")

//Set the Number of the Menu which should autochange (if you dont't want to have a change menu set it to 0)

var autochangemenu = 1;

//the speed in seconds when the tabs should change

var changespeed = 1;

//should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes

var stoponhover = 0;

/*Swich EasyTabs Functions - no need to edit something here*/

function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0)) {counter=0;}menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}

window.onload=function(){

var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount);

if (autochangemenu!=0){start_autochange();}

}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航