JavaScript 实现 Tab 点击切换实例代码


Posted in Javascript onMarch 25, 2017

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 切换的效果了,来看一下效果

JavaScript 实现 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 所输出的内容

JavaScript 实现 Tab 点击切换实例代码

3. Let 命令

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

JavaScript 实现 Tab 点击切换实例代码

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

JavaScript 实现 Tab 点击切换实例代码

JavaScript 实现 Tab 点击切换实例代码

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

JavaScript 实现 Tab 点击切换实例代码

End of File

行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
探讨javascript是不是面向对象的语言
Nov 21 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 #Javascript
javascript实现的图片预览功能
Mar 25 #Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 #Javascript
bootstrap table动态加载数据示例代码
Mar 25 #Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 #Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 #Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 #Javascript
You might like
4.与数据库的连接
2006/10/09 PHP
第十节--抽象方法和抽象类
2006/11/16 PHP
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
Python常用内置函数总结
2015/02/08 Python
详解Python中DOM方法的动态性
2015/04/11 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
python学习笔记之多进程
2020/08/06 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
美国家居装饰店:Pier 1
2019/09/04 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
Delphi笔试题
2016/11/14 面试题
公司同意接收函
2014/01/13 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
JS实现简单九宫格抽奖
2022/06/28 Javascript