使用JavaScript设置Tab栏自动切换
在下面代码中设置了tab栏可以进行周期性的切换时间时5秒，也可以鼠标移到相应的位置进行切换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab栏切换</title>
<script>
// 加载事件
window.onload=function(){
//获取所有tab-head-div
var head_divs = document.getElementById("tab-head").getElementsByTagName("div");
//保存当前焦点元素索引
var current_index=0;
// 启动定时器
var timer=window.setInterval(autoChange,5000);
//遍历元素
for(var i=0;i<head_divs.length;i++){
//添加鼠标滑动事件
head_divs[i].onmouseover = function(){
clearInterval(timer);
if(i != current_index){
head_divs[current_index].style.backgroundColor='';
head_divs[current_index].style.borderBottom='';
}
//获取所有tab-body-ul
var body_uls=document.getElementById("tab-body").getElementsByTagName("ul");
//遍历元素
for(var i=0;i<body_uls.length;i++){
//将所有元素设为隐藏
body_uls[i].className = body_uls[i].className.replace(" current","");
head_divs[i].className = head_divs[i].className.replace(" current","");
// 将当前索引对应的元素设为显示
if(head_divs[i] == this){
this.className += " current";
body_uls[i].className += " current";
}
}
}
//鼠标移出事件
head_divs[i].onmouseout = function(){
//启动定时器，恢复自动切换
timer = setInterval(autoChange,5000);
}
}
//定时器周期函数-tab栏自动切换
function autoChange(){
//自增索引
++current_index;
//当索引自增达到上限时，索引归0
if( current_index == head_divs.length ){
current_index=0;
}
//当前背景颜色和边框颜色
for(var i=0;i<head_divs.length;i++){
if(i == current_index){
head_divs[i].style.backgroundColor='#fff';
head_divs[i].style.borderBottom='1px solid #fff';
}else{
head_divs[i].style.backgroundColor='';
head_divs[i].style.borderBottom='';
}
}
//获取所有tab-body-ul
var body_uls=document.getElementById("tab-body").getElementsByTagName("ul");
//遍历元素
for(var i=0;i<body_uls.length;i++){
//将所有元素设为隐藏
body_uls[i].className = body_uls[i].className.replace(" current","");
head_divs[i].className = head_divs[i].className.replace(" current","");
// 将当前索引对应的元素设为显示
if(head_divs[i] == head_divs[current_index]){
this.className += " current";
body_uls[i].className += " current";
}
}
}
}
</script>
</head>
<style>
body{font-size: 14px;font-family: "宋体";}
body,ul,li{list-style: none;margin: 0;padding: 0;}
/* 设置Tab整体大盒子 */
.tab-box{
width: 383px;
margin: 10px;
border: 1px solid #ccc;
border-top: 2px solid #206F96;
}
/* 设置Tab栏选项样式 */
.tab-head{height: 31px;}
.tab-head-div{
width: 95px;
height: 30px;
float: left;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
background: #eee;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.tab-head .current{
background: #fff;
border-bottom: 1px solid #fff;
}
.tab-head-r{border-right: 0;}
/* 设置tab栏选项内容样式 */
.tab-body-ul{
display: none;
margin: 20px 10px;
}
.tab-body-ul li{margin: 5px;}
.tab-body .current{display: block;s}
</style>
<body>
<div class="tab-box">
<div class="tab-head" id="tab-head">
<div class="tab-head-div current" >网页设计</div>
<div class="tab-head-div">前端开发</div>
<div class="tab-head-div">人工智能</div>
<div class="tab-head-div tab-head-r">电商运营</div>
</div>
<div class="tab-body" id="tab-body">
<ul class="tab-body-ul current">
<li>HTML+CSS3网页设计与制作</li>
<li>互联网产品设计思维与实践</li>
<li>Photoshop CS6 图像设计案例教程</li>
<li>跨平台UI设计宝典</li>
</ul>
<ul class="tab-body-ul">
<li>javaScript+JQuery交互式web前端开发</li>
<li>Vue.js前端开发实战</li>
<li>微信小程序开发实践</li>
<li>JavaScript前端开发案例教程</li>
</ul>
<ul class="tab-body-ul">
<li>程序开发案例教程</li>
<li>数据分析与应用</li>
<li>实战编辑</li>
<li>快速编程入门</li>
</ul>
<ul class="tab-body-ul">
<li>数据分析思维</li>
<li>淘宝天猫</li>
<li>淘宝天猫</li>
<li>网络营销文案</li>
</ul>
</div>
</div>
</body>
</html>
