【功能实现】卡片化标签页 蓝桥云课楼赛第31期（Web 前端挑战）

【功能实现】卡片化标签页

背景介绍

选项卡功能在前端开发中特别常见，作为设置选项的模块，每个选项卡代表一个活动的区域，点击不同的区域，即可展现不同的内容，这样既能节约页面的空间又能提升页面性能。

本题需要在已提供的基础项目中使用 JS 完成选项卡功能的编码，最终实现切换选项卡可以显示对应内容的效果。

考试要求

解答：

index.js：

// 实现选项卡功能
function init() {
  // TODO 待补充代码
  var tabs = document.getElementsByClassName("tabs")[0].children
  var card = document.getElementById("content").children
  for (let index = 0; index < tabs.length; index++) {
    tabs[index].onclick = function () {
      for (let j = 0; j < tabs.length; j++) {
        tabs[j].classList.remove("active")
        card[j].classList.remove("active")
      }
      tabs[index].classList.add("active")
      card[index].classList.add("active")
    }
  }
}
init();

题目有多种实现方法，以上仅供参考。