选项卡单击切换实例代码的Javaｓｃｒｉｐｔ实现

Tab tab的切换效果在今天的网页中使用较多，包括点击开关、滑动开关、延时开关、自动开关等效果，在这篇文章中，我们使用的是原生javaｓｃｒｉｐｔ来实现Tab点击开关的效果。

1。功能的实现
HTML的一部分
按钮1
按钮2
按钮3
第一年蛋糕
第二年的蛋糕
Third Nian cakes
CSS部分
{ div
显示：无；
宽度：155px；
身高：100px；
边境：1px solid # 000；
}
以下是部分JS，根据每一步所要实现的功能，然后转换成代码，每当我们想要达到的效果，不要急着敲代码，但首先要考虑如何获得，什么是一个函数的结构需要用什么样的事件，把整个过程在我的脑海里，把每一步的逻辑代码

A.元素的获取
无功btnlist = document.getelementsbytagname（按钮）；
无功divlist = document.getelementsbytagname（div）；
注：document.getelementsbytagname返回一个数组对象，可以处理的数组，而且数组对象没有阵列的方法。

b.元素绑定单击事件
第一个按钮单击事件
btnlist { 0 }。onclick =函数（）{
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 =块；
divlist { 1 }。style.display =没有；
divlist { 2 }。style.display =没有；
}

第二个按钮单击事件
btnlist { 1 }。onclick =函数（）{
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 =没有；
divlist { 1 }。style.display =块；
}

第三按钮单击事件
btnlist { 2 }。onclick =函数（）{
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 =没有；
divlist { 1 }。style.display =没有；
divlist { 2 }。style.display =块；
}
现在我们已经实现了TAB开关的效果，看看效果如何。

虽然很粗糙，但已经达到了我们想要的效果。读者可以根据自己想要的样式设置CSS。接下来我们需要优化js代码。

2。优化

A.元素的获取
无功btnlist = document.getelementsbytagname（按钮）；
无功divlist = document.getelementsbytagname（div）；
b.将单击事件绑定到每个按钮元素
对于（var i = 0；i < btnlist.length；i++）{
我btnlist { }。指数=我； / /添加索引属性的每个按钮，马克是几个按钮第一
我btnlist { }。onclick =函数（）{
对于（var j = 0；J < btnlist.length；j++）{
将删除所有按钮样式、隐藏块。
btnlist {，}。style.color = ；
btnlist {，}。style.backgroundcolor = ；
divlist {，}。style.display =没有；
}
添加样式以单击按钮，相应的块显示
this.style.color =# FFF；
this.style.backgroundcolor =# F60 ；
divlist { }。指数。style.display =块；
}
}
索引返回字符位置，这是搜索字符串中第一个成功匹配的开始，从零开始。

这是一个javaｓｃｒｉｐｔ关键字，它代表了函数，一个内部对象自动生成，这个只能在函数里面使用，一个值这个，会跟着函数使用场景变化，但是我们只需要记住一个原理就行了，这是指对象函数调用。

这里指向相应的点击按钮，我们可以从控制台打印出来，看看这个输出是什么。

三.让命令
在ES 6中，添加命令来声明变量，这些变量类似于瓦尔河，但是声明的变量只在命令行所在的代码块中有效。

在上面的代码中，我们在代码块，分别是VaR和让声明两个变量，然后在代码块和打印两变量看，var声明的变量返回正确的值，代码块打印让声明的变量返回正确的值，并打印让代码块变量误差的说法，这表明让声明的变量只在代码块中有效

在上面的代码中，变量i声明变量，在全局范围内有效，所以只有一个全局变量，每个周期，i的值会发生变化，且周期指定在运行时函数的数组，将阅读同一变我关闭，导致到最后的输出是我值的最后一轮是10，如果让使用声明的变量只能在块级范围，最终输出的是6

A.元素的获取
无功btnlist = document.getelementsbytagname（按钮）；
无功divlist = document.getelementsbytagname（div）；
b.将单击事件绑定到每个按钮元素
为了（让我= 0；i < btnlists.length；i++）{
我btnlists { }。onclick =函数（）{
对于（var j = 0；J < btnlists.length；j++）{
btnlists {，}。风格。颜色= ；
btnlists {，}。风格。背景颜色= ；
divlists {，}。风格。显示为无；
}
this.style.color =黄色；
这个风格。背景颜色=# F60 ；
我divlists { }。风格。显示为块；
}
}
同样，我们也是打印i值的控制台。

文件结束

在写作过程中难免出现错误或不当之处。我希望你能纠正他们，以免误导更多的人，同时也希望你能支持更多。