原生JS实现选项卡效果实例

最新推荐文章于 2021-09-08 16:29:37 发布

原创最新推荐文章于 2021-09-08 16:29:37 发布 · 496 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom #html #javascript #实例

web前端，ES5 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用纯JavaScript实现的Tab切换效果，通过获取DOM元素并为li标签添加点击事件来完成不同内容面板的显示与隐藏。此外，还实现了自动轮播的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>