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一些不错的函数脚本代码
Sep 10 Javascript
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
Element Carousel 走马灯的具体实现
Jul 26 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
php设计模式小结
2013/02/15 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
php数组遍历类与用法示例
2019/05/24 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
jQuery中:password选择器用法实例
2015/01/03 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Django中几种重定向方法
2015/04/28 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
安全生产管理责任书
2014/04/16 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
Go并发4种方法简明讲解
2022/04/06 Golang
MySQL 条件查询的常用操作
2022/04/28 MySQL