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

以下是正文。

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

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

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

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

完整的代码实现:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: red;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button> <script>
//需求:鼠标放到哪个button上,改button变成黄色背景(添加类) var btnArr = document.getElementsByTagName("button");
//绑定事件
for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件,所以用到了for循环
btnArr[i].onmouseover = function () {
//【重要】排他思想:先把所有按钮的className设置为空,然后把我(this)这个按钮的className设置为current
//排他思想和for循环连用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current"; //【重要】核心代码
}
} //鼠标离开current时,还原背景色
for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件,所以用到了for循环
btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时,就把按钮的背景色还原
this.className = "";
}
} </script> </body>
</html>

代码解释:

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

            //排他思想:先把所有按钮的className设置为空,然后把我(this)这个按钮的className设置为current
//排他思想和for循环连用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current";

实现的效果如下:

tab切换:初步的代码

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 200px;
border: 1px solid #ccc;
margin: 50px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 160px;
background-color: yellow;
text-align: center;
font: 700 100px/160px "simsun";
}
.show {
display: block;
}
.current {
background-color: yellow;
}
</style> <script>
window.onload = function () {
//需求:鼠标放到上面的li上,li本身变色(添加类),对应的span也显示出来(添加类);
//思路:1.点亮上面的盒子。 2.利用索引值显示下面的盒子。 var liArr = document.getElementsByTagName("li");
var spanArr = document.getElementsByTagName("span"); for(var i=0;i<liArr.length;i++){
//绑定索引值(新增一个自定义属性:index属性)
liArr[i].index = i;
liArr[i].onmouseover = function () { //1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show"; //【重要代码】
}
}
}
</script>
</head>
<body> <div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div> </body>
</html>

实现效果如下:

上方代码的核心部分是:

            for(var i=0;i<liArr.length;i++){
//绑定索引值(新增一个自定义属性:index属性)
liArr[i].index = i;
liArr[i].onmouseover = function () { //1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show"; //【重要代码】
}
}

这段代码中,我们是通过给 liArr[i]一个index属性: liArr[i].index = i,然后让下方的span对应的index也随之对应显示:spanArr[this.index].className = "show"

这样做比较难理解,其实还有一种容易理解的方法是:给liArr[i]增加index属性时,通过attribute的方式,因为这种方式增加的属性是可以显示在标签上的。也就有了下面这样的代码:

            for(var i=0;i<liArr.length;i++){
//绑定索引值(自定义属性),通过Attribute的方式【重要】
liArr[i].setAttribute("index",i);
liArr[i].onmouseover = function () {
//3.书写事件驱动程序(排他思想)
//1.点亮盒子。 2.利用索引值显示盒子。(排他思想)
for(var j=0;j<liArr.length;j++){
liArr[j].removeAttribute("class");
spanArr[j].removeAttribute("class");
}
this.setAttribute("class","current");
spanArr[this.getAttribute("index")].setAttribute("class","show");
}
}

显示的效果是一样的,不同的地方在于,我们审查元素发现,li标签中确实新增了自定义的index属性:

本段中,我们的目的已经达到了,不足的地方在于,本段中的代码是通过document获取的的标签,如果网页中有很多个这种tab选项卡,必然互相影响。

为了多个tab栏彼此独立,我们就需要通过封装函数的方式把他们抽取出来,于是就有了下面的改进版代码。

tab切换:改进版代码(函数封装)

方式一:给current标签设置index值【推荐的代码】

完整版代码实现:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
} .box {
width: 500px;
height: 200px;
border: 1px solid #ccc;
margin: 50px auto;
overflow: hidden;
} ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
} li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
} span {
display: none;
width: 500px;
height: 160px;
background-color: yellow;
text-align: center;
font: 700 100px/160px "simsun";
} .show {
display: block;
} .current {
background-color: yellow;
}
</style> <script>
window.onload = function () {
//需求:鼠标放到上面的li上,li本身变色(添加类),下方对应的span也显示出来(添加类);
//思路:1.点亮上面的盒子。 2.利用索引值显示下面的对应的盒子。 //1、获取所有的box
var boxArr = document.getElementsByClassName("box"); //让每一个box都调用函数
for (var i = 0; i < boxArr.length; i++) {
fn(boxArr[i]);
} function fn(element) {
var liArr = element.getElementsByTagName("li"); //注意,是element获取事件源,不是document获取事件源
var spanArr = element.getElementsByTagName("span");
//2.绑定事件(循环绑定)
for (var i = 0; i < liArr.length; i++) {
//绑定索引值(新增一个自定义属性:index属性)
liArr[i].index = i;
liArr[i].onmouseover = function () {
//3.书写事件驱动程序(排他思想)
//1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for (var j = 0; j < liArr.length; j++) {
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show"; //【重要】核心代码
}
}
}
}
</script>
</head>
<body> <div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div> <div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div> <div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div> </body>
</html>

注意,通过函数fn的封装之后,我们是通过参数element获取元素,而不再是document了。这样可以达到“抽象性”的作用,各个tab栏之间相互独立。

上方代码中,我们是通过给 liArr[i]一个index属性: liArr[i].index = i,然后让下方的span对应的index也随之对应显示:spanArr[this.index].className = "show"

这样做比较难理解,根据上一段的规律,当然还有一种容易理解的方法是:给liArr[i]增加index属性时,通过attribute的方式,因为这种方式增加的属性是可以显示在标签上的。也就有了下面的方式二。

方式二:通过attribute设置index的值

基于上面方式一中的代码,我们修改一下js部分的代码,其他部分的代码保持不变。js部分的代码如下:

    <script>
window.onload = function () {
//需求:鼠标放到上面的li上,li本身变色(添加类),下方对应的span也显示出来(添加类);
//思路:1.点亮上面的盒子。 2.利用索引值显示下面的对应的盒子。 //1、获取所有的box
var boxArr = document.getElementsByClassName("box"); //让每一个box都调用函数
for (var i = 0; i < boxArr.length; i++) {
fn(boxArr[i]);
} function fn(element) {
var liArr = element.getElementsByTagName("li"); //注意,是element获取事件源,不是document获取事件源
var spanArr = element.getElementsByTagName("span");
//2.绑定事件(循环绑定)
for (var i = 0; i < liArr.length; i++) {
//绑定索引值(自定义属性)
liArr[i].setAttribute("index", i);
liArr[i].onmouseover = function () {
//3.书写事件驱动程序(排他思想)
//1.点亮盒子。 2.利用索引值显示盒子。(排他思想)
for (var j = 0; j < liArr.length; j++) {
liArr[j].removeAttribute("class"); //注意,这里是class,不是className
spanArr[j].removeAttribute("class");
}
this.setAttribute("class", "current");
spanArr[this.getAttribute("index")].setAttribute("class", "show");
}
}
}
}
</script>

不过,方式一的写法应该比方式二更常见。

总结:通过函数封装的形式,可以保证各个tab栏之间的切换互不打扰。最终实现效果如下:

我的公众号

想学习代码之外的软技能?不妨关注我的微信公众号:生命团队(id:vitateam)。

扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:

JavaScript实现Tab栏切换的更多相关文章

  1. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  2. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  3. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  5. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  6. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  7. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  8. [javascript]switchTab:仿腾讯首页Tab栏切换js插件

    腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...

  9. tab栏切换的特殊效果

    在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...

随机推荐

  1. C# .net中json字符串和对象之间的转化方法

    http://blog.csdn.net/xuexiaodong009/article/details/46998069 json作为作为一种最常用的数据,应用很广泛,在.net中如何把一个对象转化为 ...

  2. JS通过decodeURIComponent函数解码

    在我们调用后台接口的时候,如果后端传过来的字段是编码过的,那需要使用decodeURIComponent函数进行解码显示 var test1="http://www.jianshu.com/ ...

  3. Java编程思想读书笔记(一)【对象导论】

    2018年1月7日15:45:58 前言 作为学习Java语言的经典之作<Java编程思想>,常常被人提起.虽然这本书出版十年有余,但是内容还是很给力的.很多人说这本书不是很适合初学者,我 ...

  4. Python面向对象篇(1)-类和对象

    面向对象编程 1.编程范式   我们写代码的目的是什么?就是为了能够让计算机识别我们所写的代码并完成我们的需求,规范点说,就是通过编程,用特定的语法+数据结构+特殊算法来让计算机执行特定的功能,实现一 ...

  5. QQ音乐API-借他人之力实现我的音乐盒

    好久没有写博客了,最近升级做爸爸了,很开心的事情.内心又很忧郁,怎么能给媳妇和儿子一个相对好的物质经济条件.现在什么都没有的我,至少还有你们. 话不多说了,这篇博客还是和自己用vue做web app相 ...

  6. Java学习笔记20---内部类之对成员内部类的补充说明(一)

    上篇文章--笔记19简要介绍了成员内部类.局部内部类和匿名内部类,下面对成员内部类再补充一些内容. 主要有以下6点: 1.成员内部类不可以有静态成员,成员变量为static final时除外 2.外部 ...

  7. oracle PL/SQL语法基础

    目录 数据类型 定义变量 PL/SQL控制结构 参考资料 Oracle10g数据类型总结 PL/SQL之基础篇 数据类型 学习总结 字符类型 char.nchar.varchar.nvarchar:有 ...

  8. 摸索出来的chrom调试前后台数据(Java&&Ajax)交互的方法分享一下咯!!!

    1:开始没想分享的,后来看到有大佬分享如何使用Chrom的工具进行调试,哈哈哈哼,我就借着他的博客写一下我摸索的如何进行前后台数据交互吧(注:反正是自己瞎 捣鼓出来的,也许适合我,and我脑补一下吧, ...

  9. 知识点练习day9

    列表 作用:多个装备,多个爱好,多门课程,多个女朋友等 定义:[]内可以有多个任意类型的值,逗号分隔 my_girl_friends=['alex','wupeiqi','yuanhao',4,5] ...

  10. [Haskell] 为什么列表操作++很昂贵?

    博主是haskell新手.学习haskll的时候遇到了一些问题,在寻求答案的过程中产生了一些思考,可能理解存在偏差,希望各位不吝赐教. 提出问题 <Learn you a haskell for ...