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

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

1. 功能实现

html 部分

<button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <div>第一个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 点击切换实例代码


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwysfd.html