<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
ul{list-style:none}
.wrap{ width:500px;}
a{ text-decoration:none}
.hide{ display:none}
.tab { margin-bottom:20px;}
.tab .tabList{ height:40px;}
.tab .tabList li{ float:left;}
.tab .tabList li a{ display:block; padding:0 20px; height:40px; line-height:40px; color:#666}
.tab .tabList .ac{ background:#ccc; color:#fff}
/*清除浮动*/
/*.tab .tabCont{ clear:left}*/
.tab .tabItem{ border:1px solid #ccc; padding:20px; height:200px}
</style>
<script>
//需要到页面当中找对象的时候
window.onload=function(){//顶级对象(浏览器)
function tab(obj,autoRun){
//var oTab=document.getElementsByClassName('tab')[0];
//传入对象
var oUl=obj.getElementsByClassName('tabList')[0];
var aLi=oUl.getElementsByTagName('li');
var aTabItem=obj.getElementsByClassName('tabItem');
var timer; //定时器用
//----------------------------------------------
for(var i=0; i<aLi.length; i++){
//li绑定事件
aLi[i].onclick=function(){
//切换ac
for(var j=0; j<aLi.length; j++){
aLi[j].className="";
aTabItem[j].style.display="none";//隐藏所有div
};
this.className="ac"; //this指向调用该函数的对象
//指定的div显示
aTabItem[this.index].style.display="block";
n=this.index;
};
//发牌照
aLi[i].index=i;
};
if(autoRun){
//------------------------------------------------
//自动切换
var n=0;
function run(){
timer=setInterval(function(){
n++;
if(n==aLi.length){
n=0;
};
for(var j=0; j<aLi.length; j++){
aLi[j].className="";
aTabItem[j].style.display="none";//隐藏所有div
};
aLi[n].className="ac";
//指定的div显示
aTabItem[n].style.display="block";
},1000);
};
//加载时调用
run();
//--------------------------------------------------
//清除定时器
obj.onmouseover=function(){
clearInterval(timer);
};
//重开定时器
obj.onmouseout=function(){
run();
};
}
};
//------------------------------------------------------------------------
var aTab=document.getElementsByClassName('tab');
//传入对象
tab(aTab[0],true);//true 数字 “自动运行”
tab(aTab[1]);
};
</script>
</head>
<body>
<div class="wrap">
<div class="tab">
<ul class="tabList">
<li class="ac"><a href="javascript:;">tabA</a></li>
<li><a href="javascript:;">tabB</a></li>
<li><a href="javascript:;">tabC</a></li>
<li><a href="javascript:;">tabD</a></li>
</ul>
<div class="tabCont">
<div class="tabItem">AAAAAAAAA</div>
<div class="tabItem hide">BBBBBBBBB</div>
<div class="tabItem hide">CCCCCCCCC</div>
<div class="tabItem hide">DDDDDDDDD</div>
</div>
</div>
<div class="tab">
<ul class="tabList">
<li class="ac"><a href="javascript:;">tabA</a></li>
<li><a href="javascript:;">tabB</a></li>
<li><a href="javascript:;">tabC</a></li>
<li><a href="javascript:;">tabD</a></li>
</ul>
<div class="tabCont">
<div class="tabItem">AAAAAAAAA</div>
<div class="tabItem hide">BBBBBBBBB</div>
<div class="tabItem hide">CCCCCCCCC</div>
<div class="tabItem hide">DDDDDDDDD</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
ul{list-style:none}
.wrap{ width:500px;}
a{ text-decoration:none}
.hide{ display:none}
.tab { margin-bottom:20px;}
.tab .tabList{ height:40px;}
.tab .tabList li{ float:left;}
.tab .tabList li a{ display:block; padding:0 20px; height:40px; line-height:40px; color:#666}
.tab .tabList .ac{ background:#ccc; color:#fff}
/*清除浮动*/
/*.tab .tabCont{ clear:left}*/
.tab .tabItem{ border:1px solid #ccc; padding:20px; height:200px}
</style>
<script>
//需要到页面当中找对象的时候
window.onload=function(){//顶级对象(浏览器)
function tab(obj,autoRun){
//var oTab=document.getElementsByClassName('tab')[0];
//传入对象
var oUl=obj.getElementsByClassName('tabList')[0];
var aLi=oUl.getElementsByTagName('li');
var aTabItem=obj.getElementsByClassName('tabItem');
var timer; //定时器用
//----------------------------------------------
for(var i=0; i<aLi.length; i++){
//li绑定事件
aLi[i].onclick=function(){
//切换ac
for(var j=0; j<aLi.length; j++){
aLi[j].className="";
aTabItem[j].style.display="none";//隐藏所有div
};
this.className="ac"; //this指向调用该函数的对象
//指定的div显示
aTabItem[this.index].style.display="block";
n=this.index;
};
//发牌照
aLi[i].index=i;
};
if(autoRun){
//------------------------------------------------
//自动切换
var n=0;
function run(){
timer=setInterval(function(){
n++;
if(n==aLi.length){
n=0;
};
for(var j=0; j<aLi.length; j++){
aLi[j].className="";
aTabItem[j].style.display="none";//隐藏所有div
};
aLi[n].className="ac";
//指定的div显示
aTabItem[n].style.display="block";
},1000);
};
//加载时调用
run();
//--------------------------------------------------
//清除定时器
obj.onmouseover=function(){
clearInterval(timer);
};
//重开定时器
obj.onmouseout=function(){
run();
};
}
};
//------------------------------------------------------------------------
var aTab=document.getElementsByClassName('tab');
//传入对象
tab(aTab[0],true);//true 数字 “自动运行”
tab(aTab[1]);
};
</script>
</head>
<body>
<div class="wrap">
<div class="tab">
<ul class="tabList">
<li class="ac"><a href="javascript:;">tabA</a></li>
<li><a href="javascript:;">tabB</a></li>
<li><a href="javascript:;">tabC</a></li>
<li><a href="javascript:;">tabD</a></li>
</ul>
<div class="tabCont">
<div class="tabItem">AAAAAAAAA</div>
<div class="tabItem hide">BBBBBBBBB</div>
<div class="tabItem hide">CCCCCCCCC</div>
<div class="tabItem hide">DDDDDDDDD</div>
</div>
</div>
<div class="tab">
<ul class="tabList">
<li class="ac"><a href="javascript:;">tabA</a></li>
<li><a href="javascript:;">tabB</a></li>
<li><a href="javascript:;">tabC</a></li>
<li><a href="javascript:;">tabD</a></li>
</ul>
<div class="tabCont">
<div class="tabItem">AAAAAAAAA</div>
<div class="tabItem hide">BBBBBBBBB</div>
<div class="tabItem hide">CCCCCCCCC</div>
<div class="tabItem hide">DDDDDDDDD</div>
</div>
</div>
</div>
</body>
</html>