听说选项卡很难，你可以试试这些JS方法首先获取tabs元素和bodys元素，然后进行tabs循环，给每一条tab添加对应

下边的代码是为了需求先设计出选项卡的CSS的属性：

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #tab_box1,
        #tab_box2,
        #tab_box3,
        #tab_box4 {
            width: 400px;
            border: 1px dashed darkcyan;
            margin: auto;
        }

        ul {
            display: flex;
        }

        .tab {
            flex: 1;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            border-bottom: 1px dashed orange;
            cursor: pointer;


        }

        .tab.current {
            background: darkorange;
            color: #fff;
        }

        .body {
            width: 100%;
            height: 300px;
            line-height: 300px;
            text-align: center;
            font-size: 40px;
            display: none;
        }

        .body.current {
            display: block;
        }
    </style>

下边这部分代码是选项卡的格式：

<body>
    <div class="box">
        <ul class="tab_box">
            <li class="current">css</li>
            <li>html</li>
            <li>js</li>
        </ul>
        <div class="body_box">
            <div class="current">css很好</div>
            <div>html很好</div>
            <div>js很好</div>
        </div>
    </div>
</body>

我们可以通过for循环的方式实现选项卡的效果：

 var tabs = document.getElementsByTagName('li'),
        bodys = document.querySelectorAll('.body_box div')
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].index = i;
        tabs[i].onclick = function () {
            for (var j = 0; j < tabs.length; j++) {
                tabs[j].className = '',
                    bodys[j].className = '';
            }
            this.className = 'current';
            bodys[this.index].className = 'current'
        }
    }

首先获取tabs元素和bodys元素，然后进行tabs循环，给每一条tab添加对应的索引，然后需要点击某一条tab就要对应的body展示出来，需要给tab对应的索引和body进行绑定。还需要点击某一条tab就要附上相应的颜色，所以再清除tab和body原有的名字，让鼠标点击某一条tab再给它重新命名，点击对应的body也重新命名。这样就做出了所有的效果。