Javascript中常用选项卡3种写法

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

选项卡的三种写法

选项卡算是网页中较常用的一个效果之一，虽然比较简单，但是麻雀虽小，五脏俱全，其中的原理也在js很多效果中通用（例如焦点图等）。在制作选项卡时，需要解决的一个问题，就是在循环中，怎样将i的值传递到事件中，围绕这一点，可以引申出常见的几种写法。下面附上一个最简单的选项卡结构。

1.通过js添加自定义属性

window.onload = function(){
	var tab = getByClass(document, 'tab')[0];
	var tabNav = getByClass(tab, 'tab-nav');
	var tabCon = getByClass(tab, 'tab-content');

	for( var i = 0; i

2.通过闭包传递i的值

window.onload = function(){
	var tab = getByClass(document, 'tab')[0];
	var tabNav = getByClass(tab, 'tab-nav');
	var tabCon = getByClass(tab, 'tab-content');

	for( var i = 0; i

3.第二种的一个变形，也是通过闭包来实现

window.onload = function(){
	var tab = getByClass(document, 'tab')[0];
	var tabNav = getByClass(tab, 'tab-nav');
	var tabCon = getByClass(tab, 'tab-content');

	for( var i = 0; i

提示：您可以先修改部分代码再运行