js利用tab键切换当前页面_JavaScript实现Tab栏切换

本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

以下是正文。

京东网页上，可以看到下面这种tab栏的切换：

我们把模型抽象出来，实现一下。

举例引入：鼠标悬停时，current元素的背景变色

本段我们先举一个例子，因为这里用到了排他思想(先干掉 all，然后保留我一个)。对于理解tab切换，很有帮助。

完整的代码实现：

button {

margin: 10px;

width: 100px;

height: 40px;

cursor: pointer;

}

.current {

background-color: red;

}

按钮1

按钮2

按钮3

按钮4

按钮5

//需求：鼠标放到哪个button上，改button变成黄色背景(添加类)

var btnArr = document.getElementsByTagName("button");

//绑定事件

for(var i=0;i

btnArr[i].onmouseover = function () {

//【重要】排他思想：先把所有按钮的className设置为空，然后把我(this)这个按钮的className设置为current

//排他思想和for循环连用

for(var j=0;j

btnArr[j].className = "";

}

this.className = "current"; //【重要】核心代码

}

}

//鼠标离开current时，还原背景色

for(var i=0;i

btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原

this.className = "";

}

}

代码解释：

鼠标悬停时，current栏变色，这里用到了排他思想：先把所有按钮的className设置为空，然后把我(this)这个按钮的className设置为current，就可以达到变色的效果。核心代码是：

//排他思想：先把所有按钮的className设置为空，然后把我(this)这个按钮的className设置为current

//排他思想和for循环连用

for(var j=0;j

btnArr[j].className = "";

}

this.className = "current";

实现的效果如下：

tab切换：初步的代码

代码如下：

* {

padding: 0;

margin: 0;

}

.box {

width: 500px;

height: 200px;

border: 1px solid #ccc;

margin: 50px auto;

overflow: hidden;

}

<