window.onload = function(){ var item = document.getElementsByClassName("item"); var it = item[0].getElementsByTagName("div"); var content = document.getElementsByClassName("content"); var con = content[0].getElementsByTagName("div"); for(let i=0;i<it.length;i++){ it[i].onclick = function(){ for(let j=0;j<it.length;j++){ it[j].className = ''; con[j].style.display = "none"; } this.className = "active"; it[i].index=i; con[i].style.display = "block"; } } }
时间: 2023-07-15 11:10:02 浏览: 81
这段代码使用了原生 JavaScript,实现了一个简单的选项卡效果。当页面加载完成后,会获取所有 class 名称为 "item" 的元素,并取第一个元素的子元素 div,以及所有 class 名称为 "content" 的元素,并取第一个元素的子元素 div。然后对每个选项卡进行监听,当点击一个选项卡时,会将所有选项卡的类名清空并将对应的内容隐藏,再将当前选项卡添加类名 "active" 并显示对应的内容。其中,通过 let 关键字定义的变量 i 和 j 只在 for 循环内部有效,避免了变量污染全局。
阅读全文