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

Tab Tab切换效果广泛应用于当今的网页，包括点击切换、滑动切换、延时切换、自动切换等。在这篇博文中，我们使用了原生JavaScript来实现选项卡点击切换效果

1.功能实现

Html部分

按钮样式=' background-color : # f60；color: # fff'button 1/button button 2/button 3/button div style=' display : block；'第一年糕/第二年糕/第三年糕/第四年糕组

div { display: none宽度： 155 px；高度： 100像素；border: 1px固体# 000；}接下来是JS部分，根据每一步要实现的功能转换成代码。每当我们想要达到一个效果的时候，不要急于先敲代码，而是先思考如何实现，结构是什么，某个功能需要使用什么事件等等。在脑海中经历整个过程，然后将每一步的逻辑转化为代码。

A.获取元素

var BTN list=document . getelementsbytagname(' button ')；var div list=document . getelementsbytagname(' div ')；注意：document.getElementsByTagName返回一个【类数组对象】，可以用array的方法处理，但是类数组对象没有array的方法

B.将点击事件绑定到元素

//第一个按钮btnlist [0]的click事件。onclick=function () {btnlist [0]。style.color=' # fffBTN list[0]. style . background COlOr=' # f60 '；BTN list[1]. style . color=' '；BTN list[1]. style . background COlOr=' '；BTN list[2]. style . color=' '；BTN list[2]. style . background COlOr=' '；div list[0]. style . display=' block '；div list[1]. style . display=' none '；div list[2]. style . display=' none '；}//第二个按钮的点击事件btnlist [1]。onclick=function () {btnlist [0]。风格。color=BTN list[0]. style . background COlOr=' '；BTN list[1]. style . color=' # fff '；BTN list[1]. style . background COlOr=' # f60 '；BTN list[2]. style . color=' '；BTN list[2]. style . background COlOr=' '；div list[0]. style . display=' none '；div list[1]. style . display=' block '；}//第三个按钮btnlist [2]的点击事件。onclick=function () {btnlist [0]。风格。color=BTN list[0]. style . background COlOr=' '；BTN list[1]. style . color=' '；BTN list[1]. style . background COlOr=' '；BTN list[2]. style . color=' # fff '；BTN list[2]. style . background COlOr=' # f60 '；div list[0]. style . display=' none '；div list[1]. style . display=' none '；div list[2]. style . display=' block '；}现在我们已经达到了Tab切换的效果，让我们来看看效果如何

虽然很简单，但是达到了预期的效果。读者可以根据自己想要的样式设置CSS。下一步是优化JS代码

2.最佳化

A.获取元素

var BTN list=document . getelementsbytagname(' button ')；var div list=document . getelementsbytagname(' div ')；b .将点击事件绑定到每个按钮元素

for(var I=0；i btnList.lengthi ) { btnList[i]。索引=I；//为每个按钮添加索引属性，将按钮标记为列表[I]。onclick=function(){ for(var j=0；j btnList.lengthJ) {//移除所有按钮样式，并阻止隐藏的BTN list[j]. style . color=' '；BTN list[j]. style . background COlOr=' '；div list[j]. style . display=' none '；}//给被点击的按钮添加样式，对应的块显示this . style . color=' # fff '；this . style . background COlOr=“# f60”；div list[this . index]. style . display=' block '；}}index返回字符位置，这是搜索字符串中第一个成功匹配的起始位置，从零开始

这是Javascript的一个关键字，表示函数运行时自动生成的内部对象。这只能在函数内部使用。这个值会随着功能使用场景的不同而变化，但我们只需要记住一个原则。这是指调用函数的对象。

这里指向相应的点击按钮，我们可以通过控制台打印看到这个的输出

3.让命令

在ES 6中添加了let命令来声明变量，其用法类似于var，但声明的变量只在let命令所在的代码块中有效

在上面的代码中，我们在代码块中分别用var和let声明了两个变量，然后在代码块内部和外部打印了这两个变量。我们可以看到，var声明的变量返回正确的值，let声明的变量在代码块内部返回正确的值，let声明的变量在代码块外部报告错误，这说明let声明的变量只在它所在的代码块有效。

上面的代码中，变量I是用var声明的，在全局范围内有效，所以全局只有一个变量I，变量I的值在每个循环中都会发生变化。当循环中赋给数组A的函数运行时，它将通过闭包读取同一个变量I，得到最后一轮I值的最终输出，即10。如果使用let，声明的变量只在块级范围内有效，最后输出。

A.获取元素

var BTN list=document . getelementsbytagname(' button ')；var div list=document . getelementsbytagname(' div ')；b .将点击事件绑定到每个按钮元素

for(设I=0；i btnLists.lengthi ) { btnLists[i]。onclick=function(){ for(var j=0；j btnLists.lengthj){ BTN list[j]. style . color=' '；BTN list[j]. style . background COlOr=' '；div list[j]. style . display=' none '；} this.style.color='黄色'；this . style . background COlOr=“# f60”；div list[I]. style . display=' block '；}}同样，我们也是控制台打印I的值。

文件结束

写作中的错误或不足是不可避免的。希望大家指正，以免误导更多人。也希望大家多多支持我们。