背景介绍

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

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

考试要求

请在 index.js 文件中根据现有 DOM 结构（页面布局部分不能做任何修改操作）实现选项卡动态切换功能。

页面效果如下所示：

代码如下

为了节约时间，写的比较拉，哈哈哈哈哈

// 实现选项卡功能
function init() {
    // TODO 待补充代码
    var red = document.getElementsByClassName("red");
    var green = document.getElementsByClassName("green");
    var blue = document.getElementsByClassName("blue");
    var yellow = document.getElementsByClassName("yellow");
    var one = document.getElementById("one");
    var two = document.getElementById("two");
    var three = document.getElementById("three");
    var four = document.getElementById("four");
    red[0].onclick = function() {
        red[0].className = "red active";
        green[0].className = "red";
        blue[0].className = "blue";
        yellow[0].className = "yellow";
        one.className = 'active';
    };
    green[0].onclick = function() {
        green[0].className = "green active";
        red[0].className = "red";
        blue[0].className = "blue";
        yellow[0].className = "yellow";
        two.className = 'active';
    };
    blue[0].onclick = function() {
        blue[0].className = "blue active";
        green[0].className = "green";
        red[0].className = "red";
        yellow[0].className = "yellow";
        three.className = 'active';
    };
    yellow[0].onclick = function() {
        yellow[0].className = "yellow active";
        green[0].className = "green";
        red[0].className = "red";
        blue[0].className = "blue";
        four.className = 'active';
    };
}
init();