原生js——实现Tab选项卡切换效果——加入手动切换（汇总）

原生js—实现Tab(tab)选项卡切换效果——加入手动切换（汇总）

注：这是对tab选项卡切换效果的一个总结；

1.Demo展示：

2 . Html布局：

<div class="wrap">
<div class="container-top" id="list">
<ul>
<li><a href="">论坛</a></li>
<li><a href="">博客</a></li>
<li><a href="">交流</a></li>
<li><a href="">社区</a></li>
<li><a href="">反馈</a></li>
</ul>
</div>
<div class="container-bottom" id="item">
<div class="con">
<ul>
<li><a href="#">论坛A</a></li>
<li><a href="#">论坛B</a></li>
<li><a href="#">论坛C</a></li>
<li><a href="#">论坛D</a></li>
</ul>
</div>
<div class="con">
<ul>
<li><a href="#">博客A</a></li>
<li><a href="#">博客B</a></li>
<li><a href="#">博客C</a></li>
<li><a href="#">博客D</a></li>
</ul>
</div>
<div class="con">
<ul>
<li><a href="#">交流A</a></li>
<li><a href="#">交流B</a></li>
<li><a href="#">交流C</a></li>
<li><a href="#">交流D</a></li>
</ul>
</div>
<div class="con">
<ul>
<li><a href="#">社区A</a></li>
<li><a href="#">社区B</a></li>
<li><a href="#">社区C</a></li>
<li><a href="#">社区D</a></li>
</ul>
</div>
<div class="con">
<ul>
<li><a href="#">反馈A</a></li>
<li><a href="#">反馈B</a></li>
<li><a href="#">反馈C</a></li>
<li><a href="#">反馈D</a></li>
</ul>
</div>
</div>
</div>

3. css样式表：

*{
margin:0;
padding:0;
text-decoration:none;
list-style:none;
}

a{
color:#fff;
font-size:13px;
display:block;
}

a:hover{
color:#ccc;
}

.wrap{
margin:60px auto;
width:250px;
height:auto;
}

.container-top{
height:30px;
}

.container-bottom{
height:60px;
overflow:hidden;
}

.container-top ul{
height:30px;
}

.container-top ul li{
float:left;
width:50px;
height:30px;
line-height:30px;
text-align:center;
background-color:#ccc;
}

.container-bottom ul{
height:60px;
background-image:linear-gradient(to right,#FF00FF,#E066FF);
}

.container-bottom ul li{
width:125px;
height:30px;
line-height:30px;
float:left;
text-align:center;
background:none;
}

.select{
background-image:linear-gradient(to right,dimgray,gray);
}

4. 原生js代码：

function $(id){
return typeof id ==="string"?document.getElementById(id):document;
}

window.onload = function(){
//初始化计时器;
var timer = null;
//初始化索引;
var index = -1;
var items = $("list").getElementsByTagName("li");
var divs = $("item").getElementsByTagName("div");

//对应的标签页高亮显示，相对应的盒子也出现;
function show(){
index++;
if(index > 4) index = 0;
for(var i = 0,len = items.length; i < len; i++){
items[i].className = "";
divs[i].style.display = "none";
}
items[index].className = "select";
divs[index].style.display = "block";
}

//选项卡自动播放;
function autoPlay(){
timer = setInterval(show,1500);
}

autoPlay();

//加入手动切换;
function handle(){
for(var i = 0,len = items.length; i < len; i++){
items[i].id = i;
//鼠标移入，触发相应的事件;
items[i].onmouseover = function(){
//解决标签滑动速度过快造成的bug1;
if(timer){
clearInterval(timer);
timer = null;
}
for(var j = 0,len = items.length; j < len; j++){
items[j].className = "";
divs[j].style.display = "none";
}
this.className = "select";
divs[this.id].style.display = "block";
}
//鼠标移出，继续执行定时器;
items[i].onmouseout = function(){
autoPlay();
index = this.id;//bug优化2:解决鼠标滑过速度过快，导致不按顺序播放;
}
}
}

//自动调用手动切换函数;
handle();
}

注：
1.写的函数，尽量做到把其封装起来，让其能够复用
2.如要实现点击切换，把" mouseover " 改为 " onclick "即可
3.注意setTimeout 和 setInterval 的区别，一个是延迟执行代码，一个是循环执行代码；
4.涉及到循环遍历数组的时候，为了避免进入死循环，尽量使用以下方式：

for(var i = 0,len = items.length; i < len; i++){
代码块;
}

而不是这样：

for(var i = 0; i < items.length; i++){
代码块;
}

5.如遇到问题请仔细思考，查看源码，都有相应的注释；

如要实现马上切换效果，请查看：link(https://blog.csdn.net/qq_43495629/article/details/87185286).
如要实现延迟切换效果，请查看：link(https://blog.csdn.net/qq_43495629/article/details/87270244).
如要实现自动切换效果，请查看：link(https://blog.csdn.net/qq_43495629/article/details/87271432).

~如遇错误，欢迎指正；