javascript案例---选项卡

需求：

点击一个按钮，当前按钮是不同的颜色，其他按钮是原始的颜色

每点击一个按钮其他的选项区域会隐藏，当前索引对应盒子显示

布局：

有三个按钮，横向排列，初始第一个按钮会有当前的一个不同的颜色

有三个盒子显示内容，初始一个盒子，其他两个盒子隐藏

我们先来完成盒子结构

<div class="box">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>

然后书写它的样式

<style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        .box {
            width: 600px;
            height: 400px;
            border: 3px s