原生JS實現選項卡效果例項
阿新 • • 發佈：2019-01-22
<!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>