e_mark = 0; for (var i = 0, len = tabs.length; i < len; i++) { tabs[i].num = i; tabs[i].onclick = function () { tabs[e_mark].classList.toggle(tabs_checked_style); tabs[this.num].classList.toggle(tabs_checked_style); contents[e_mark].classList.toggle(contents_checked_style); contents[this.num].classList.toggle(contents_checked_style); e_mark = this.num; }; }
1. “e_mark” 的作用：
e_mark = 0;
初始的 “e_mark” 的值为“0”。表示“e_mark”指向的是当前被选中的元素为编号是“0”的那个元素。
2. “tabs[i].num=i” 的作用：
tabs[i].num = i;
在上层的for循环中，“i”的值其实就是“tabs”数组中各个元素的下标值。由于“onclick”等事件的匿名函数中无法直接获取到“i”的值。也就是说，当元素被点击时，触发的函数无法得知是“tabs”数组中的第几个元素被点击了，因为每一个元素都可能触发这个函数。但是，函数可以通过“this”来得知是哪一个元素被点击了，至于这个被点击的元素是第几个，可以通过这个被点击的元素的一个自定义值来获取。
我们在元素被点击之前，先给这些元素绑定一个编号：num（自定义值），那么就可以通过“this.num”来获取到这个元素的编号。也就知道这个元素是“tabs”数组中的第几个元素了。
3. 修改当前元素和更新元素的样式：
tabs[e_mark].classList.toggle(tabs_checked_style); tabs[this.num].classList.toggle(tabs_checked_style);
上面说到，“e_mark” 为当前元素的编号，而“this.num”为被点击及新选中的元素的编号。
那么当元素被点击时，需要做两件事：1.把当前被选中的元素的样式还原到普通的样式，2.将被点击的元素的样式修改为被选中时的样式。
结合classList的方法，我们知道：.list-item-checked 为被选中时追加的样式，选中的元素只需添加这个类名即可，而未被选中的元素则移除这个类名。
以上这篇js + css实现标签内容切换功能(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: