专栏首页Nian糕的私人厨房JavaScript 实现 Tab 点击切换

JavaScript 实现 Tab 点击切换

Unsplash

Tab 选项卡切换效果在现如今的网页中,运用的也是比较多的,包括点击切换、滑动切换、延迟切换、自动切换等多种效果,在这篇博文里,我们是通过原生 JavaScript 来实现 Tab 点击切换的效果

1. 功能实现

html 部分

<button style="background-color:#f60; color: #fff;">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<div style="display:block;">第一个Nian糕</div>
<div>第二个Nian糕</div>
<div>第三个Nian糕</div>

css 部分

div {
  display: none;
  width: 155px;
  height: 100px;
  border: 1px solid #000;
}

接下来是 JS 部分,根据每一步要实现的功能,进而转换成代码,每当我们要实现一个效果的时候,先不要急着去敲代码,而是先思考要怎么去实现,结构是什么样的,某个功能需要用到什么事件等等,自己在脑海里把整个流程过一遍,再去把每一步的逻辑转换成代码

a. 获取元素

var btnList = document.getElementsByTagName("button");
var divList = document.getElementsByTagName("div");

注释document.getElementsByTagName 返回的是一个[类数组对象],可以使用数组的方法对其进行处理,但类数组对象并不具有数组所具有的方法

b. 给元素绑定点击事件

//第一个按钮的点击事件
btnList[0].onclick = function () {
  btnList[0].style.color = "#fff";
  btnList[0].style.backgroundColor = "#f60";
  btnList[1].style.color = "";
  btnList[1].style.backgroundColor = "";
  btnList[2].style.color = "";
  btnList[2].style.backgroundColor = "";
  divList[0].style.display = "block";       
  divList[1].style.display = "none";        
  divList[2].style.display = "none";        
}
//第二个按钮的点击事件
btnList[1].onclick = function () {
  btnList[0].style.color = "";
  btnList[0].style.backgroundColor = "";
  btnList[1].style.color = "#fff";
  btnList[1].style.backgroundColor = "#f60";
  btnList[2].style.color = "";
  btnList[2].style.backgroundColor = "";    
  divList[0].style.display = "none";        
  divList[1].style.display = "block";       
}   
//第三个按钮的点击事件
btnList[2].onclick = function () {
  btnList[0].style.color = "";
  btnList[0].style.backgroundColor = "";
  btnList[1].style.color = "";
  btnList[1].style.backgroundColor = "";
  btnList[2].style.color = "#fff";
  btnList[2].style.backgroundColor = "#f60";
  divList[0].style.display = "none";        
  divList[1].style.display = "none";        
  divList[2].style.display = "block";   
}

现在我们已经实现了一个 Tab 切换的效果了,来看一下效果

运行结果

虽然很简陋,但已经达到我们想要的效果了,读者可根据自己想要的样式来设置 CSS,接下来我们要做的就是,对 JS 代码进行优化

2. 优化

a. 获取元素

var btnList = document.getElementsByTagName("button");
var divList = document.getElementsByTagName("div");

b. 给每一个 button 元素绑定点击事件

for(var i = 0; i < btnList.length; i++ ) {
  btnList[i].index = i; //给每个按钮添加index属性,标记是第几个按钮
  btnList[i].onclick = function() {
    for(var j = 0; j < btnList.length; j++) {
      //将所有的按钮样式去掉,块隐藏
      btnList[j].style.color = "";
      btnList[j].style.backgroundColor = "";
      divList[j].style.display = "none";
    }
    //给点击的按钮添加样式,对应的块显示
    this.style.color = "#fff";
    this.style.backgroundColor = "#f60";
    divList[this.index].style.display = "block";
  }
}

index 返回字符位置,它是被搜索字符串中第一个成功匹配的开始位置,从零开始

this 是 Javascript 的一个关键字,它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用 this,关于 this 的值,会跟随函数使用场景的不同而发生变化,但是我们只需要记住一个原则就可以了,this 指的是调用函数的那个对象

在这里 this 指向对应的点击按钮,我们可以通过控制台打印来看到 this 所输出的内容

运行结果

3. Let 命令

ES 6 中新增了 let 命令,用来声明变量,其用法类似于 var,但是所声明的变量,只在 let 命令所在的代码块内有效

运行结果

在上面的代码中,我们在代码块里,分别用 varlet 声明了两个变量,接着在代码块内外打印这两个变量,可以看到,var 声明的变量返回了正确的值,代码块内打印 let 声明的变量返回了正确的值,而在代码块外打印 let 声明的变量报错,这表明,let 声明的变量只在它所在的代码块有效

for 循环,var 命令

for 循环,let 命令

上面代码中,变量 ivar 声明的,在全局范围内都有效,所以全局只有一个变量 i,每一次循环,变量 i 的值都会发生改变,而循环内被赋给数组 afunction 在运行时,会通过闭包读到这同一个变量 i,导致最后输出的是最后一轮的 i 的值,也就是 10,而如果使用 let,声明的变量仅在块级作用域内有效,最后输出的是 6

关于 let 更多的特性,或者想要了解 ES 6 新特性的读者,可以去看下阮一峰老师编著的 ECMAScript 6 入门

a. 获取元素

var btnList = document.getElementsByTagName("button");
var divList = document.getElementsByTagName("div");

b. 给每一个 button 元素绑定点击事件

for(let i = 0; i < btnLists.length; i++) {
  btnLists[i].onclick = function() {
    for(var j = 0;j < btnLists.length;j++){
      btnLists[j].style.color="";
      btnLists[j].style.backgroundColor="";
      divLists[j].style.display="none";
    }
    this.style.color = "yellow";
    this.style.backgroundColor="#f60";
    divLists[i].style.display="block";
  }
}

同样的,我们也是控制台来打印一下 i 的值

运行结果

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS 消除 inline-block 元素间的间隙

    从上图的运行结果可以看到,添加 display: inline-block; 属性后,水平呈现的元素间产生了空隙,出现这一现象的本质是,HTML 中存在的空白符...

    Nian糕
  • Type Script 的基本概念及常用语法

    TypeScript 是一种由微软开发的自由和开源的编程语言,它作为 JavaScript 的一个超集,扩展了JavaScript 的语法,而且本质上向这个语言...

    Nian糕
  • JavaScript 字符串

    toString() 方法,返回一个表示该对象的字符串,可以将所有的数据都转换为字符串,但是要排除掉 null 和 undefined

    Nian糕
  • 美国持续网络训练环境(PCTE)内容简报

    美国陆军在2019年11月25号发布了最新的持续网络培训环境(PCTE)的项目CYBER TRIDENT(网络培训、就绪、集成、交付和企业技术)网络培训合同要求...

    时间之外沉浮事
  • C++ 多线程死锁(引入lock函数)

    上一篇讲了互斥锁(传送门)的用法,解决了多线程共享资源可能会造成的一些问题,那么引入了锁以后,其实也难免会造成一些问题,比如说忘记unlock,或者有两个锁a...

    Ch_Zaqdt
  • 免费接收短信验证码???集成国内外多个平台

    zhangwentian 本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有...

    Erwin
  • 基于动态记忆网络的视觉跟踪

    原文题目:Visual Tracking via Dynamic Memory Networks

    Jarvis Cocker
  • 修复XP SP3的IE图标

    电脑主页被篡改了,于是用windows清理助手进行修复,但是修复后突然发现桌面的IE图标没了,到网上搜索了很多方法,下面就是来自网络上修复IE图标的方法,结果只...

    py3study
  • RocketMQ 一行代码造成大量消息丢失

    错误信息关键点:MQBrokerException:CODE:2 DESC:[TIMEOUT_CLEAN_QUEUE]broker busy,start fl...

    丁威
  • Java虚拟机(四)垃圾收集算法

    前言 在本系列上一篇文章中我讲到了垃圾标记算法,垃圾被标记后,GC就会对垃圾进行收集,垃圾收集有很多种算法,这篇文章就来介绍常用的垃圾收集算法的思想。 1.标记...

    用户1269200

扫码关注云+社区

领取腾讯云代金券