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 动态生成私有变量访问器
Dec 06 Javascript
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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 date函数参数详解
2006/11/27 PHP
php中session使用示例
2014/03/29 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
Python字符串格式化的方法(两种)
2017/09/19 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
python super函数使用方法详解
2020/02/14 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
EJB timer的种类
2014/10/28 面试题
网站设计师的岗位职责
2013/11/21 职场文书
留学推荐信写作指南
2014/01/25 职场文书
社区母亲节活动方案
2014/03/05 职场文书
保健品市场营销方案
2014/03/31 职场文书
实习单位鉴定评语
2014/04/26 职场文书
应聘护士求职信
2014/07/21 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android