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的执行过程(图文)
May 20 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 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
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
eclipse php wamp配置教程
2016/06/30 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
jquery中ajax学习笔记4
2011/10/16 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
Node.js事件驱动
2015/06/18 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
基于python二叉树的构造和打印例子
2019/08/09 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
如何基于python测量代码运行时间
2019/12/25 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
暑期培训班招生方案
2014/08/26 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
给学校的建议书400字
2015/09/14 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
Jsonp劫持学习
2021/04/01 PHP
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
MySQL sql模式设置引起的问题
2022/05/15 MySQL